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>

Display Progress Status using Ext.MessagesBox in extjs(Extended JavaScript)

You can show progress status using the Ext.MessageBox.
Such message boxes can be used to show processing of data at the backend.
The below code is an example of to display it. You can set the timeout as per the time you wish the user should wait.

Ext.MessageBox.show({
                       msg: 'Processing Data.. Please wait',
                       progressText: 'Loading...',
                       width:350,
                       wait:true,
                       waitConfig: {interval:250},
                       icon:'ext-mb-download'
                      
                });
                setTimeout(function(){
                   Ext.MessageBox.hide();
                }, 2000);

Styling the text of a column in the Grid in Extjs(Extended JavaScript Library)

If you want to style a particular column, say for example you want the text in a column to appear bold or you want it to color the text,the renderer function of the grid column can be used.
In the renderer function you can apply style to the value(text) of the column and return it.
Here is an example of how to do it :-

 {header: "Name", width:75, dataIndex: 'Name',align:'right',hideable:false, sortable: true,
  renderer: showBold}   
 
  function showBold(val, meta, record, rowIndex, colIndex, store){
       return '<span class= "bold-display"' + val + '</span>';      
  }
 
  Ofcourse you have the style defined in the styleClass
  <style>
    .bold-display{
        font-weight:bold;
    }
  </style>
 
  You can define certain conditions as well in the renderer function based on the requirement.