Create a viewport using Extjs (Extended Javascript)

Viewport is nothing but a plain container that automatically changes its size to the size of the whole browser window. It then allows you to add ExtJS UI components and containers within its region.

Here is a quick and easy to build example for constructing a viewport using extjs library.

This example shows that i have created 2 sections using viewport.
One in the west region and one in the center.
We can assign width and size to these regions.

After doing this the final step is to render our html components or regions inside these views.
You can use the contentEl property to eventually achieve this.


Code:-

// Viewport variable start
        var myBorderPanel = new Ext.Viewport({
            id : 'l1',
            width: 700,
            height: 1000,
            layout: 'border',
            
            items: [{
                collapsible: true,
                collapseMode: 'mini',
                split: true, 
                region:'west',
                margins: '5 0 0 0',
                cmargins: '5 5 0 0',
                width: 250,
                minSize: 100,
                maxSize: 250,
                contentEl: 'BLayout2',
                border:0,
                bodyStyle:{"background-color":"#E6E4E4","border":"none"} 
            },{
                region:'center',
                margins: '5 0 0 0',
                contentEl: 'BLayout3',
                bodyStyle:{"border":"none"}                
            }]
        });

        // Viewport variable end
You should now be good to go and create your very own viewport using extjs library.

Multi Slider example in Extjs

Here is a very simple example to implement multi slider using Extjs framework.
We can use multi slider when we want the user to select a range for a particular value.

This example also uses the plugin to show the value as a tooltip.
Here is the code:-

// Multi Slider

var size= new Ext.Slider({

    renderTo: 'multi-slider-horizontal',

    width: 200,

    values: [5, 250],

    minValue: 1,

    maxValue: 500,

    constrainThumbs: false,

              

    plugins: new Ext.slider.Tip({

        getText: function(thumb){

            return String.format('{0} ', thumb.value);

        }

    })

Hope this helps.

Simple example for Extjs Modal Window

Here is a quick and easy to build Extjs modal window.
This piece of code simply renders a Extjs window with its modal=true property enabled.

Here is the code:-

win = new Ext.Window({

        height      : 400,

        width       : 530,

        modal       : true,

        title       : 'Search Options',

        contentEl   : 'DL',

        plain       : true,

        border      : false,

        resizable   : true,

        draggable   : true,

        closable    : true,

        closeAction : 'hide',

        style       : 'windowstyle1',

        cls         : 'windowstyle1',

        buttonAlign : 'center',      

        buttons     : [

        {

            text    : 'OK',

            handler : function() {

            win.hide();

        }

        }

        ]

    })

    win.show();

Make sure the contentEl contains the id of the container where you want to render the window.

It could be a div id or whatever you find appropriate to render your window in.

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/