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>' 

}] 

});