How to select text in the grid panel (with the mouse) to copy data

How to select text in the grid panel (with the mouse) to copy data

Following are the steps for allowing selecting text in Grid Panel:

1) First add the following css code in application:

<style type="text/css">
	.x-selectable, .x-selectable * {
		-moz-user-select: text!important;
		-khtml-user-select: text!important;
	}
</style>

2) If you want this change on only one page then use below code:

var grid = new Ext.grid.GridPanel({
   viewConfig: {
      templates: {
	cell: new Ext.Template(
	'<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}>',
	'<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>', '</td>'
	 )
	}
   },
   ...
});

   Or if we want it for the whole application then use below code

if (!Ext.grid.GridView.prototype.templates) {
   Ext.grid.GridView.prototype.templates = {};
}
Ext.grid.GridView.prototype.templates.cell = new Ext.Template(
   '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" '+
   'style="{style}" tabIndex="0" {cellAttr}>',
   '<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>',
   '</td>'
);

Add pagination to handle large number of data in EXT JS combobox

When the list of items is large, we can add pagination in combo box list, as shown in
the following screenshot:

Use configuration as pageSize: {number of items in one page} in Combo Box.

{

xtype: 'combo',
fieldLabel: 'ABC',
emptyText: '--- Please Select Alpha ---',
store:store,
displayField: 'name',
valueField: 'id',
selectOnFocus: true,
typeAhead: true,
editable: true,
triggerAction: 'all',
forceSelection: true,
minChars: 2,
pageSize:10 //configuring paging size to combo box
}

This pagination works same like Grid Panel pagination. Implementation is same.It uses same start and limit parameters to filter the records.
Note: this applies only when the combo box is in a remote mode

Reference: EXT JS Cook Book 3.0

Adding Paging Row Numberer in EXT JS Grid Panel having paging toolbar

There are two types of classes provides by EXT JS for showing row numberer:

First in which there is no pagination on grid panel:
new Ext.grid.RowNumberer();


The above only works in non pagination grid panel. Because in paginated grid panel, when we move to next page it again starts row numberer from 1.

Second , in which there is pagination on grid panel:
new Ext.ux.grid.PagingRowNumberer()
This above one works fine in both non paginated grid panel and paginated grid panel.


Following is the code example, of using row numberer

var grid4 = new xg.GridPanel({
        id:'button-grid',
        store: store,
cm: new xg.ColumnModel([
new Ext.ux.grid.PagingRowNumberer(),      // adding paging row numberer  
        {header: "A", dataIndex: 'x'},
        {header: "B", dataIndex: 'y'}
        ]),
      sm: sm2,
tbar: new Ext.PagingToolbar({ // add pagination
        pageSize: 10,
        store: store,
        displayInfo: true,
        displayMsg: 'Displaying records {0} - {1} of {2}',
        emptyMsg: "No records to display"   
    }),
        viewConfig: {
            forceFit:true,
   scrollOffset:0,
   emptyText :'No record(s) found.'
        },
        autoHeight: true,
        frame:true,
stripeRows:true,
loadMask:true, enableHdMenu: false,
enableColumnMove: false,      
        renderTo: 'abcxyz'
    });

How to set position of vertical scrollbar of a grid panel to top

The following is the code to set position of vertical scrollbar of a grid panel to top.

gridPanel.getView().scrollToTop();

How to reset pagination and gridpanel using extjs

If pagination on grid is on bottom toolbar then use the following code 

Ext.getCmp('gridId').getStore().removeAll();

Ext.getCmp('gridId').getBottomToolbar().updateInfo(); 

If pagination on grid is on top toolbar then use the following code  

Ext.getCmp('gridId').getStore().removeAll();

Ext.getCmp('gridId').getTopToolbar().updateInfo(); 

how to create multi level headers in grid panel using EXTJS

Following is the code of creating multi-level or nested headers in Grid Panel:

Ext.onReady(function() {   
    var structure = ['India', 'USA', 'China', 'Aus', 'UK'],
    struct = ['', 'fas'],   
    nestHdr = ['Number', '%'],   
    fields = [],
    columns = [],
   
    continentGroupRow = [],
    cityGroupRow = [];

     var myData = [
        [12, 232, 342,  234,  234, 3, 5,6],
        [12, 232, 342,  234,  234, 3, 5,6],
        [12, 232, 342,  234,  234, 3, 5,6],
        [12, 232, 342,  234,  234, 3, 5,6]
    ];

    var sm = new Ext.grid.RowNumberer();

   for(j=0;j<4;j++)
    {
        struct.push(structure[j]);
    }
    struct.push('totsdfasal');
  
    function generateConfig()
    {
        var i=-1;   

        columns.push(sm); // pushing row numberer
       
        Ext.iterate(struct, function(topHdr)
        {
            i=i+1;           
                   
            if(i==0)
            {
                // adding empty header for rownumberer
                cityGroupRow.push({
                    header: '',
                    colspan: 1,
                    align: 'center'
                });
            }
            else if((i>0 && i<2) || i==(struct.length-1)) // condition for adding office and total
            {       
               
                cityGroupRow.push({
                    header: '',
                    colspan: 1,
                    align: 'center'
                });
               
                fields.push({
                    type: 'int',
                    name: topHdr + i
                });
           
                columns.push({
                    dataIndex: topHdr + i,
                    header: topHdr,
                    renderer: Ext.util.Format.usMoney
                });
               
            }
            else
            {
               
                Ext.each(topHdr, function(eachHdr)
                {                   
                    numProducts = nestHdr.length;                                   
                    cityGroupRow.push({
                    header: eachHdr,
                    colspan: numProducts,
                    align: 'center'
                    });
               
                    Ext.each(nestHdr, function(eachNestHdr){
                        fields.push({
                            type: 'int',
                            name: eachHdr + i
                        });
                       
                        columns.push({
                            dataIndex: eachHdr + i,
                            header: eachNestHdr,
                            renderer: Ext.util.Format.usMoney
                        });
                    });                 
                });
            }
        });
    }
   
    generateConfig();
   
       

    var group = new Ext.ux.grid.ColumnHeaderGroup({
        rows: [cityGroupRow]
    });
   
 
    var grid = new Ext.grid.GridPanel({
        renderTo: 'resultDiv',
        title: 'Sales By Location',
        width: 1000,
        height: 400,
        store: new Ext.data.ArrayStore({
            fields: fields,
            data: myData
        }),
        cm: new Ext.grid.ColumnModel({               
            columns: columns
        }),
     
        viewConfig: {
            forceFit: true
        },
        plugins: group
    });
});

How to disable tab key on window popup/ on ext message alert popup

Add the following code in you js. This will restrict your tab key to work on greyed page or back ground page when window popups

Ext.onReady(function(){
     Ext.getBody().on('keyup', function(e, t)
                {
                    if (e.TAB == e.getKey())
                    {
                        var top_win = Ext.WindowMgr.getActive();
                       
                        if (top_win && top_win.modal)
                        {
                            if (!top_win.getEl().contains(document.activeElement))
                            {
                                var found = false;
                                var first_focus = top_win.findBy(function(cmp, win)
                                {
                                    var ti = cmp.getEl().dom.tabIndex;
                                   
                                    if('hidden' != cmp.getXType() && !cmp.hidden && ti >= 0 && !found)
                                    {
                                        found = true;
                                        return true;
                                    }
                                   
                                    return false;
                                });
                               
                                if (first_focus.length > 0)
                                {
                                    first_focus[0].focus(true);
                                }
                                else
                                {
                                    top_win.focus();
                                }
                            }
                        }
                    }
                }, this);

});

How to delete and add columns in Grid Panel using EXTJS

Following are the steps of adding and deleting column in Grid Panel. The code written below is inspired by the code provided here.

I have modified the above code according to my requirement.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
    <script type="text/javascript" src="../css/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../css/ext/ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/ext/resources/css/ext-all.css" />

 </head>

 <body>
<div id="abc">  </div>
 </body>

 <script language="JavaScript">

Ext.override(Ext.data.Store,{
    addField: function(field){
        field = new Ext.data.Field(field);
        this.recordType.prototype.fields.replace(field);
        if(typeof field.defaultValue != 'undefined'){
            this.each(function(r){
                if(typeof r.data[field.name] == 'undefined'){
                    r.data[field.name] = field.defaultValue;
                }
            });
        }
    },
    removeField: function(name){
        this.recordType.prototype.fields.removeKey(name);
        this.each(function(r){
            delete r.data[name];
            if(r.modified){
                delete r.modified[name];
            }
        });
    }
});
Ext.override(Ext.grid.ColumnModel,{
    addColumn: function(column, colIndex){
        if(typeof column == 'string'){
            column = {header: column, dataIndex: column};
        }
        var config = this.config;
        this.config = [];
        if(typeof colIndex == 'number'){
            config.splice(colIndex, 0, column);
        }else{
            colIndex = config.push(column);
        }
        this.setConfig(config);
        return colIndex;
    },
    removeColumn: function(colIndex){
        var config = this.config;
        this.config = [config[colIndex]];
        config.splice(colIndex, 1);
        this.setConfig(config);
    }
});
Ext.override(Ext.grid.GridPanel,{
    addColumn: function(field, column, colIndex){
        if(!column){
            if(field.dataIndex){
                column = field;
                field = field.dataIndex;
            } else{
                column = field.name || field;
            }
        }
        this.store.addField(field);
        return this.colModel.addColumn(column, colIndex);
    },
    removeColumn: function(name, colIndex){
        this.store.removeField(name);
        if(typeof colIndex != 'number'){
            colIndex = this.colModel.findColumnIndex(name);
        }
        if(colIndex >= 0){
            this.colModel.removeColumn(colIndex);
        }
    }
});


 var grid = new Ext.grid.EditorGridPanel({
   
    renderTo:'abc',
    title: 'ADD Delete Columns',   
    collapsible: true,   
    width:500,
    height:300,
    store: new Ext.data.SimpleStore({
        fields: ['A', 'B'],
        data: [['ABC', 'DEF'], ['GHI', 'JKL']]
    }),
    columns: [
        {header: 'A', dataIndex: 'A'},
        {header: 'B', dataIndex: 'B'}
    ],
    tbar:[
        {
            xtype:'button',
            text: 'Add Column',           
            handler: onAdd

        },{
            xtype:'button',
            text: 'Delete Column',
            handler:onDelete
        }
        ]
});
   
   
    function showResultText(btn, text){
       // Ext.example.msg('Button Click', 'You clicked the {0} button and entered the text "{1}".', btn, text);
       grid.addColumn(text);
    };
 
 
 
    function deleteColumn(btn, text){
       // Ext.example.msg('Button Click', 'You clicked the {0} button and entered the text "{1}".', btn, text);
       grid.removeColumn(text);
    };
    function onAdd(btn, ev) {
        Ext.MessageBox.prompt('Column Name', 'Please enter column name:', showResultText);
    }
    /**
     * onDelete
     */
    function onDelete() {
        Ext.MessageBox.prompt('Column Name', 'Please enter column name:', deleteColumn);      
    }

//grid.addColumn('C');
//grid.addColumn({name: 'D', defaultValue: 'D'}, {header: 'D', dataIndex: 'D'});
//    grid.removeColumn('B');





 </script>
</html>

How to add search filter in Grid Panel using EXTJS

To get the search filter in your Grid Panel, do the following steps

1) Add following scripts and css in your html.

<link href="../css/css/icons.css" rel="stylesheet" type="text/css"></link>
<link href="./img/extjs.ico" rel="shortcut icon"></link>
<script src="../javascript/js/Ext.ux.ThemeCombo.js" type="text/javascript">
</script>
<script src="../javascript/js/Ext.ux.grid.Search.js" type="text/javascript">
</script>

 Add the following code in your Grid Panel as a plugin:

,plugins:[new Ext.ux.grid.Search({
                iconCls:'icon-zoom'
                ,readonlyIndexes:['country']
                ,disableIndexes:['pctChange']
                ,minChars:1
                ,autoFocus:true
                ,mode:'local' // to filter on local; for remote add mode:'remote'
                ,width: '50'
            })],

Download the required css and javascript from here.

For more information check this link:
http://gridsearch.extjs.eu/

Show buttons horizontally using buttongroup in EXTJS

items: [{
                       xtype: 'buttongroup',                                                             
                       columns:2,                              
                       items:[
                            {xtype: 'button', text: 'Search'},
                            {xtype: 'button', text: 'Searchw'}
                           ] }]