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>

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.

Open a Extjs Window with text area on click of image / button to save the long information or description

If you have rendered an image or button in column of the grid panel and you want to open a pop up in the form of extjs window onclick of  it.
The window contains an input text area which will allow the user to fill the data.
This text needs to be saved for the field associated with that column.
The following is the code which demonstrates the above mentioned description.




{header: "header", width:110, dataIndex: 'dataField',
                            xtype:'actioncolumn',
                              items: [{
                                 icon:'<image path>',
                                 style: {
                                      marginLeft: '5px'
                                 },
                                 handler: function(grid, rowIndex, colIndex) {
                                    var rec = grid.getStore().getAt(rowIndex);
                                    var descText = rec.get('dataField');
                                    openPopup(descText,rowIndex,rec);
                                 }
                              }]
                         },



       /*
        ** Open Window with text area
        */
        function openPopup(description,rowInd,record){
            var win = new Ext.Window({
                modal       : true,
                height      : 250,
                width       : 260,
                plain       : true,
                border      : false,
                resizable   : false,
                maximizable : false,
                draggable   : true,
                closable    : true,
                closeAction : 'destroy',
                title       : 'Title', 
                autoScroll  : true,
                buttonAlign : 'center',
                items: [{
                    xtype: 'textarea',
                    id :  'textAreaId',
                    value: description,
                    name: 'testing',
                    height: 184,
                    width: 248
                }],
                buttons: [{
                    text     : 'Submit',
                    onClick : function () {
                        // SAVE ACTION
                        try{
                            record.set('<reqd field from store>',Ext.getCmp('textAreaId').getValue());
                            win.destroy();
                        }catch(e){
                            win.destroy();
                        }
                    }                   
                }]
            }).show();

        }

Display checkboxes for selected rows using CheckBoxModel in Extjs(Extended javascript Library)

Using CheckBoxModel in Extjs , displays check boxes for all rows of a grid by default.
What if you wanted to disable or hide the check boxes for specific row(s)?

Well this can be done using the renderer function of Ext.selection.CheckboxModel.

   sm = new Ext.selection.CheckboxModel({
              
                checkOnly : true,
                renderer : function(val, meta, record, rowIndex, colIndex, store,view){
                        if( NOT REQUIRED CONDITION){   
                            return null;   
                        }else{
                            meta.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';
                            return '<div class="' + Ext.baseCSSPrefix + 'grid-row-checker">&#160;</div>';
                        }  
                    }
   });

The above code will simply hide the checkboxes for the specific unwanted rows.

 

Tooltip not working for items in Extjs(Extented Javascript Library) ?

Did you ever face an issue that even when you define the Tooltip text for an item( image, button etc), the text simply doesn't work.

Well, the reason behind this is that you have forgotten the following line

Ext.tip.QuickTipManager.init();
You have to initialize the Ext.tip.QuickTipManager  before using the tooltip.

Upper and Lower limit for numeric fields as xtype in Extjs(Extended JavaScript Library)

Use of xtype as numberfield.

This code helps you with upper and lower limit values for the numeric fields enabling user to scroll through any range of numeric value

Numeric input values for this field can have upper and lower limits.

This can be set as follows:-

{header: "Quantity", width:70, dataIndex: 'Quantity', sortable: true,                    

                             editor: {

                                xtype:'numberfield',

                                minValue: 1,

                                maxValue: 100,

                                allowBlank:false

                             }

                         }

Extjs(Extended JavaScript Library) Column with sub-columns

Here’s another post which will help you categorize your columns. Given below is an example of discount and its sub types like: Percent discount and flat discount. This code can be used for many other sub divisions.

A single column can be divided into 2 sub-columns in extjs. A property having two modes of inputs can be divided into 2 columns , yet under one main column.

Here's the code :-

{

                             text : "Discount",

                             columns:[

                                         {   

                                                header: "%", width:40, dataIndex: 'discountPercent', sortable: true

                                         },

                                         {

                                             header: "Flat", width:55, dataIndex: 'flatDiscount', sortable: true

                                         }

                             ]

  }

Event handling on images rendered in gridPanel

The handler function for an item can be used to write the mouseclick event logic.

columns: [ 
              {
                  xtype:'actioncolumn',
                  header: "Action",
                  width:55,
                  items: [{
                            icon:'{!$Resource.Images}/Image.png',
                            tooltip: 'Configure Kit',
                            id:'ImageId',
                            style: {
                                 marginLeft: '5px'
                            },

                            handler: function(grid, rowIndex, colIndex) {
                               var rec = grid.getStore().getAt(rowIndex);

                                // Do the click event logic here 

                            } 
                                    
                  }] 
         ]  

Rendering an Image in Extjs gridPanel

 xtype:'actioncolumn' can be defined in a column.

 icon : Provide the url for the image.

 You can add tooltip and style to it. 

columns: [ 
                        {
                            xtype:'actioncolumn',
                            header: "Action",
                            width:55,
                            items: [{
                                        icon:'{!$Resource.Images}/Image.png',
                                        tooltip: 'Configure Kit',
                                        id:'ImageId',
                                        style: {
                                            marginLeft: '5px'
                                        },
                                                                                
                                    }                                    
                            ] 
                         }

]