Radio button in Grid Panel for selecting items using Extjs (Extended Javascript Library)

Here is an example of implementation of Radio buttons for selecting one row at a time in a Grid panel in Extjs.
A group of radio buttons need to rendered in the first column of the grid.
Here is the code:
The definition of column will be as follows:-

{header: "Select",hideable:false,renderer:renderRadioBox,
editor: {
xtype:'radio'
}
}

Now,
The renderer function is defined as follows:-

function renderRadioBox(val, meta, record, rowIndex, colIndex, store){
var a = '<input type= "radio" name="radiogroup" style="margin-left:10px;"/>';
return a;  
}

The action to be implemented after clicking the radio button can be written with the help of listener method on the grid panel:-

listeners: {
itemclick : function(view,rec,item,index,e,eOpt){
var position = view.getPositionByEvent(e);
var columnIndex = position.column;
 
if(columnIndex == 1){                                  
// DO YOUR ACTION HERE...
}
}  
}

Hope this will be helpful who wanted to implement this.

Remove the Refresh Button from Grid Panel in Extjs (Extended javaScript Library)

When you add a toolbar at the bottom of the Grid Panel, you can observe the Refresh icon.
If you wish to hide this refresh button you can do the following

listeners: {
          
/* FIRES AFTER THE COMPONENT RENDERING IS FINISHED.
  THE AFTERRENDER EVENT IS FIRED AFTER THIS COMPONENT HAS BEEN RENDERED
*/                                      
afterrender : function(component){                    
component.getBottomToolbar().refresh.hideParent = true;
component.getBottomToolbar().refresh.hide();                
}
}

This will simply hide the Refresh Icon.

Row Expander in Extjs (Extended JavaScript Library)

Here is an example of implementation of row expander in Extjs.
A plugin called 'rowexpander' can be used to implement this.
You can provide a template here with all the fields you wish to display in the expanded section.
These fields should be part of Model/Reader so that we can get dynamic values with respect to each row.

Here is the code:-
 Add this piece of code in grid definition.

plugins: [{
    ptype: 'rowexpander',
    rowBodyTpl : [
        '<span style="background-color: #F6EF97;height: 25px;padding: 5px 0px;"> {!$Label.Route} {fromAirport} - {toAirport}</span><br/>',
        '<p><b> {!$Label.Base_Fare} </b> {BaseFare} </p>',
        '<p><b> {!$Label.TaxesAndCharges} </b> {TaxesFare} <b>{!$Label.Fare_Type} R </p></b>',
        ]
}],

// {fromAirport} , {TaxesFare} , {toAirport} etc are all dataIndex values defined in the Model/Reader

Extjs with Salesforce - Best Practices

Few practices which can be implemented while using ExtJs Library :-

• Before starting any development , finalize the version of Extjs which you will use.Migrating from one version to another isn't easy.If you are working on live project , its better to start off with the commercial licensed version provided by the customer.  

• Avoid including unnecessary resources(.js file) on VF page.'ext-all.js' and 'ext-all.css' are sufficient. Include plugin resources only when you are using it.

• The following piece of code helps resolve may issues related to IE browser       

1.         if(Ext.isIE){
2.            Ext.enableGarbageCollector=false;
3.         }

• If you intend to show Extjs Grid with Pagination support  for a large set of records , then ,It will be always advisable to write a custom Pagination Logic and avoid using PagingProxy/PagingMemoryProxy.Using the above proxies will result in view state issue.

• Make use of JSON.serialize() and  JSON.deserialize() methods in SF, to form a Json string and to form a list using deserialize respectively.Make sure you define all the variables in the Ext.Model with their correct Type.You can validate your json string on http://jsonlint.com/

• While defining any component in Extjs , try avoiding extra comma(,) For Example:-

1.   {
2.       header: "Name",
3.       width:75,
4.       dataIndex: 'Name',
5.       sortable: true,    // Avoid this extra comma
6.   }

           This cause issues in IE browser.

• Include the following resource file to debug the javascript errors caused due to Extjs resource :- 'ext-all-dev.js'

• Moreover, refer to the sencha link for API documentation. It is quite helpful.  http://docs.sencha.com/ext-js/4-0/#!/api

• You can post your queries on the Sencha forums as well. There are many active users here who will help you.   http://www.sencha.com/forum/

Show loading image by the time the action method gets completed in Extjs (Extended JavaScript Library)

Here is an example of showing a 'Loading Icon' , till your action gets completed. This was implemented by one of my good friend, Tohar.

Using this example you can grey out the background and show the Loading image till the action is completed.

This example uses Ext Window for this purpose.

Suppose,

<input type="button" onclick="some action here which involves some wait"/>

Onclick of this button call:-

function showWaitbox()

{

if(waitMsg!=null)

waitMsg.show();

}

And on complete of action call:-

function hideWaitbox()

{

if(waitMsg!=null){}

waitMsg.hide();

}

Here is the definition of the Ext Window:-

waitMsg = new Ext.Window({ 

id:'waitMsgId',          

resizable:false, 

closable : false, 

preventHeader :true,

frame :false,

frameHeader :false,  

shadow :false, 

modal:true,

bodyStyle: 'border:none;background:none;',

items:[{ 

xtype:'panel',

modal:false,

height:25,

width : 100,

preventHeader :true,

frame :false,

bodyStyle: 'border:none;background:none !important;',

frameHeader :false,  

html:'<div align="center"><img src="/loading.gif" style="padding-right:10px;padding-left:6px;"/>Loading...</div>' 

}] 

}); 

Parent Node Icon of Tree Panel (Tree Grid) in Extjs - Extended Javascript Library

Did you ever face an issue with the parent record icon in Tree Panel. Have you observed that double clicking on the Parent node icon - changes it to child record icon.
Huh, here is one of the solutions for resolving such issue.

listeners:{
    // AVOID ICON TO CHANGE ON DOUBLE CLICK
    beforeitemexpand : function(node,eOpts ){
        if(!node.isExpandable()){
            return false;
        }
    }
}

Styling a Grid Panel Row based on column value in Extjs (Extended JavaScript)

Adding a style class to a particular row in the grid is quite easy.
You can use the viewConfig property of grid panel.
If you wish to style your rows differently based on different values of a particular record value, here is an example of how to achieve it.


    viewConfig: {
        //Return CSS class to apply to rows depending upon data values
        getRowClass: function(record, index) {
            var c = record.get('Type');
            if (c == 'TYPE 1') {
                return 'childRow';
            } else if (c == 'TYPE 2') {
                return 'parentRow';
            }
        }
    },
   
    <style>
    .childRow{
        background-color: #C0C0C0;
    }

    .parentRow{
        background-color: white;
    }
    </style>