Friday, January 30, 2015

Extjs 5.1.0 how to Change grid panel row select color by cls. Ext Js 5 gridPanel selected row color, ExtJS 5.x Gridpanel Example with CheckboxModel

In Extjs 5.1 this below is CLS class for selected row in GridPanel
.x-grid-item-selected .x-grid-cell

You can override this cls for your customization for row selected cls.

Full Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>ExtJS 5 Grid Example</title>
    <link rel="stylesheet" href="extjs-5.1.0/packages/ext-theme-gray/build/resources/ext-theme-gray-all.css"/>
    <script src="extjs-5.1.0/extjs5.1.0-all-dashboard.js"></script>


<style>
.x-grid-item-selected .x-grid-cell {
       background-color: #B3D4FF !important;
       color :#000000 !important;
     }

</style>

    <script>
Ext.onReady(function(){

 Ext.define('Student',{
 extend: 'Ext.data.Model',
 fields:[
  {name: 'id'},
  {name: 'name'},
  {name: 'mobile'},
  {name: 'TestColumn',
      convert : function(value, record){
    return record.get('name')+" CHECK";
}
 
  }
 ]
 });

    var studentStore = Ext.create('Ext.data.Store',{
model: 'Student',
 pageSize: 7,
data:[
{id:'1', name:'Binod', mobile:'99999999999'},
{id:'5', name:'Ishan', mobile:'99898989898'},
{id:'3', name:'Akshu', mobile:'99999999999'},
{id:'4', name:'Sanjay 4', mobile:'999988885'},
{id:'5', name:'Sanjay 5', mobile:'999988885'},
{id:'6', name:'Sanjay 6', mobile:'999988885'},
{id:'7', name:'Sanjay 7', mobile:'999988885'},
{id:'8', name:'Sanjay 8', mobile:'999988885'},
{id:'9', name:'Sanjay 9', mobile:'999988885'},
{id:'10', name:'Sanjay 10', mobile:'999988885'},
{id:'11', name:'Sanjay 11', mobile:'999988885'},
{id:'12', name:'Sanjay 12', mobile:'999988885'},
{id:'13', name:'Sanjay 13 ', mobile:'999988885'},
{id:'14', name:'Sanjay 14', mobile:'999988885'},
{id:'15', name:'Sanjay 15', mobile:'999988885'},
{id:'16', name:'Sanjay 16', mobile:'999988885'},
{id:'17', name:'Sanjay 17', mobile:'999988885'},
{id:'18', name:'Sanjay 18', mobile:'999988885'},
{id:'19', name:'Sanjay 19', mobile:'999988885'},
{id:'20', name:'Sanjay 20', mobile:'999988885'},
{id:'21', name:'Sanjay 21', mobile:'999988885'},
{id:'22', name:'Sanjay 22', mobile:'999988885'},
{id:'23', name:'Sanjay 23', mobile:'999988885'},
{id:'24', name:'Zambia 24', mobile:'8888999997'}
]

});

Ext.create('bin.com.ResultGrid',{
renderTo: Ext.getBody(),
store: studentStore

});

});


Ext.define('bin.com.ResultGrid',{
extend: 'Ext.grid.Panel',
width: 600,
height: 200,
title: 'Student Records',
plugins: 'gridfilters',

columns:[
{text: 'Roll Number', filter: 'string', dataIndex:'id', width: 100},
{text: 'Name' , filter: 'string',dataIndex:'name', width: 100},
{text: 'Mobile' , filter: 'string',dataIndex:'mobile', flex: 1},
{text: 'Test Column' , filter: 'string',dataIndex:'TestColumn', flex: 1},

],

initComponent: function () {
 this.selModel = new Ext.selection.CheckboxModel( {
 });
 this.callParent(arguments);
}


});


</script>
</head>
</html>


Posted by Binod Suman at 1:23 AM 0 Put a Comments

Monday, January 26, 2015

Ext js 5.1 tutorial, ExtJS GridPanel example getting start, pagingmemory in ExtJS 5.1, ext.data.proxy.memory read method


When you migrate from ExtJS 4 to 5 then you will find out that lot of things in GridPanel has been changed. If you have implemented "pagingmemor" in ExtJS 4.x then it will not work in ExtJS 5.1, cause Ext.data.proxy.Memory's read method has been changed, earlier there were three arguments were passed and this time only one 'operation' is there. Due to absence of 'scope' and 'callback' your 'Ext.ux.data.PagingMemoryProxy.js' will not work and this is important JS for local memory sorting, filtering and pagination.

ExtJS 5.1 came up with new configruation in 'Ext.data.proxy.Memory' and that is '' .
You do not need to do any thing for local memory pagination, just set this configuration true. That is.

Below is the full example of this configuration:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>ExtJS 5.1.0 Grid Pagination Example</title>
 
  <link rel="stylesheet" href="extjs-5.1.0/packages/ext-theme-gray/build/resources/ext-theme-gray-all.css"/>
    <script src="extjs-5.1.0/extjs5.1.0-all-dashboard.js"></script>



    <script>
Ext.onReady(function(){

    Ext.define('Student',{
 extend: 'Ext.data.Model',
 fields:[{name: 'id'},{name: 'name'},{name: 'mobile'} ]
 });

var mydata = {
"success":true,
"totalCount": 24,
"rows":[
{status: true, id:1, name:'Binod', mobile:'0000099257'},
{status: true, id:2, name:'Binod 2', mobile:'0000099257'},
{status: true, id:3, name:'Akshu', mobile:'12345070277'},
{status: false, id:4, name:'Sanjay 4', mobile:'999988885'},
{status: false, id:5, name:'Sanjay 5', mobile:'999988885'},
{status: false, id:6, name:'Sanjay 6', mobile:'999988885'},
{status: false, id:7, name:'Sanjay 7', mobile:'999988885'},
{status: false, id:8, name:'Sanjay 8', mobile:'999988885'},
{status: false, id:9, name:'Sanjay 9', mobile:'999988885'},
{status: false, id:10, name:'Sanjay 10', mobile:'999988885'},
{status: false, id:11, name:'Sanjay 11', mobile:'999988885'},
{status: false, id:12, name:'Sanjay 12', mobile:'999988885'},
{status: false, id:13, name:'Sanjay 13 ', mobile:'999988885'},
{status: false, id:14, name:'Sanjay 14', mobile:'999988885'},
{status: false, id:15, name:'Sanjay 15', mobile:'999988885'},
{status: false, id:16, name:'Sanjay 16', mobile:'999988885'},
{status: false, id:17, name:'Sanjay 17', mobile:'999988885'},
{status: false, id:18, name:'Sanjay 18', mobile:'999988885'},
{status: false, id:19, name:'Sanjay 19', mobile:'999988885'},
{status: false, id:20, name:'Sanjay 20', mobile:'999988885'},
{status: false, id:21, name:'Sanjay 21', mobile:'999988885'},
{status: false, id:22, name:'Sanjay 22', mobile:'999988885'},
{status: false, id:23, name:'Sanjay 23', mobile:'999988885'},
{status: true, id:24, name:'Zambia 24', mobile:'8888999997'}
]
}



var storeProxy = {
                  type: 'memory',
 enablePaging : true,
                  data: mydata
            };

storeProxy.reader = {
           type: 'json',
           totalProperty: 'totalCount',
           rootProperty: 'rows',
           successProperty: 'success'
       };

 
   var studentStore = Ext.create('Ext.data.Store',{
 model: 'Student',
 autoLoad: true,
 remoteSort: true,
 remoteFilter : true,
 pageSize: 10,
 proxy: storeProxy

});

var dockedPagingToolbar = [];
          dockedPagingToolbar = [{
          xtype: 'pagingtoolbar',
          store: studentStore,
          dock: 'bottom',
          displayInfo: true
    }];
           

Ext.create('Ext.grid.Panel',{
renderTo: Ext.getBody(),
store: studentStore,
width: 450,
height: 250,
height: 290,
multiSelect: true,
title: 'Student Records',
plugins: 'gridfilters',
    dockedItems : dockedPagingToolbar,

columns:[
{xtype: 'checkcolumn', text: 'Status', filter: 'string', dataIndex:'status', width: 50},
{text: 'Roll Number', filter: 'numeric', dataIndex:'id', width: 100},
{text: 'Name' , filter: 'string',dataIndex:'name', width: 100},
{text: 'Mobile' , filter: 'string',dataIndex:'mobile', flex: 1}
]
});

});

</script>
</head>
</html>


Posted by Binod Suman at 7:34 AM 0 Put a Comments

Saturday, January 24, 2015

extjs 5.1.0 pagingmemory example extjs 5.1.0 pagingmemory alternative Ext JS GridPanel, sorting, filtering, pagination on local data


 pagingmemory config was working very fine till Ext JS 4 BUT it seems some issue is there in Ext JS 5. So we can not use pagingmemory directly, in stead we have to manually handle data from pagination. It is easy and just one line code, take page start and limit value and slice your actual data and send back to store proxy data variable.


Two thinks  keep in mind for below example:
1. In storeProxy, added new config name is actualData where you have to assign your complete data fetch from back end.

2. storeProxy.reader.rootProperty value I used in manually hardword "rows" in slice method where I cut data for current page.

Please just copy and paste below code (change extjs css and js file path accordginly), it work perfectly.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>ExtJS 5.1.0 Grid Pagination Example</title>

  <link rel="stylesheet" href="extjs-5.1.0/packages/ext-theme-gray/build/resources/ext-theme-gray-all.css"/>
    <script src="extjs-5.1.0/extjs5.1.0-all-dashboard.js"></script>
<script src="extjs-5.1.0/examples/ux/data/NOCPagingMemoryProxy.js"></script>


    <script>
Ext.onReady(function(){

    Ext.define('Student',{
 extend: 'Ext.data.Model',
 fields:[{name: 'id'},{name: 'name'},{name: 'mobile'} ]
 });

var mydata = {
"success":true,
"totalCount": 24,
"rows":[
{status: true, id:1, name:'Binod', mobile:'0000099257'},
{status: true, id:2, name:'Binod 2', mobile:'0000099257'},
{status: true, id:3, name:'Akshu', mobile:'12345070277'},
{status: false, id:4, name:'Sanjay 4', mobile:'999988885'},
{status: false, id:5, name:'Sanjay 5', mobile:'999988885'},
{status: false, id:6, name:'Sanjay 6', mobile:'999988885'},
{status: false, id:7, name:'Sanjay 7', mobile:'999988885'},
{status: false, id:8, name:'Sanjay 8', mobile:'999988885'},
{status: false, id:9, name:'Sanjay 9', mobile:'999988885'},
{status: false, id:10, name:'Sanjay 10', mobile:'999988885'},
{status: false, id:11, name:'Sanjay 11', mobile:'999988885'},
{status: false, id:12, name:'Sanjay 12', mobile:'999988885'},
{status: false, id:13, name:'Sanjay 13 ', mobile:'999988885'},
{status: false, id:14, name:'Sanjay 14', mobile:'999988885'},
{status: false, id:15, name:'Sanjay 15', mobile:'999988885'},
{status: false, id:16, name:'Sanjay 16', mobile:'999988885'},
{status: false, id:17, name:'Sanjay 17', mobile:'999988885'},
{status: false, id:18, name:'Sanjay 18', mobile:'999988885'},
{status: false, id:19, name:'Sanjay 19', mobile:'999988885'},
{status: false, id:20, name:'Sanjay 20', mobile:'999988885'},
{status: false, id:21, name:'Sanjay 21', mobile:'999988885'},
{status: false, id:22, name:'Sanjay 22', mobile:'999988885'},
{status: false, id:23, name:'Sanjay 23', mobile:'999988885'},
{status: true, id:24, name:'Zambia 24', mobile:'8888999997'}
]
}



var storeProxy = {
                  type: 'memory',
 actualdata: mydata,
                  data: mydata
            };
//storeProxy.type = 'pagingmemory';
storeProxy.reader = {
           type: 'json',
           totalProperty: 'totalCount',
           rootProperty: 'rows',
           successProperty: 'success'
       };

 
   var studentStore = Ext.create('Ext.data.Store',{
 model: 'Student',
 autoLoad: true,
 remoteSort: true,
 remoteFilter : true,
 pageSize: 10,
 proxy: storeProxy,
 listeners: {
     beforeload : function(store, operation, eOpts){
if (operation._start !== undefined && operation._limit !== undefined) {
 // Here you have to manually handle data for requested page as pagingmemory not working.
   store.proxy.data.rows = store.proxy.actualdata.rows.slice(operation._start, operation._start + operation._limit);
}
           }
   }
});

var dockedPagingToolbar = [];
          dockedPagingToolbar = [{
          xtype: 'pagingtoolbar',
          store: studentStore,
          dock: 'bottom',
          displayInfo: true
    }];
         

Ext.create('Ext.grid.Panel',{
renderTo: Ext.getBody(),
store: studentStore,
width: 450,
height: 250,
height: 290,
multiSelect: true,
title: 'Student Records',
plugins: 'gridfilters',
    dockedItems : dockedPagingToolbar,

columns:[
{xtype: 'checkcolumn', text: 'Status', filter: 'string', dataIndex:'status', width: 50},
{text: 'Roll Number', filter: 'string', dataIndex:'id', width: 100},
{text: 'Name' , filter: 'string',dataIndex:'name', width: 100},
{text: 'Mobile' , filter: 'string',dataIndex:'mobile', flex: 1}
]
});
// studentStore.loadPage(1);

});

</script>
</head>
</html>

Please refer this link blog for better example on Extjs 5.1 without using any hard coded data.
Posted by Binod Suman at 7:47 PM 0 Put a Comments

Extjs Pagination, pagingmemory Example, Extjs 4.1.0 Grid Panel with Sorting and Pagination on local memory





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>ExtJS 4.1. Grid Pagination Example</title>
 
  <link rel="stylesheet" href="ext-4.2.1.883\packages\ext-theme-gray\build\resources\ext-theme-gray-all.css"/>
<script src="ext-4.2.1.883\ext-all.js"></script>
<script src="ext-4.2.1.883\examples\ux\data\PagingMemoryProxy.js"></script>


    <script>
Ext.onReady(function(){

 Ext.define('Student',{
 extend: 'Ext.data.Model',
 fields:[{name: 'id'},{name: 'name'},{name: 'mobile'} ]
 });

var mydata = {
"success":true,
"totalCount": 24,
"rows":[
{status: true, id:1, name:'Binod', mobile:'0000099257'},
{status: false, id:5, name:'Ishan', mobile:'0002887325'},
{status: true, id:3, name:'Akshu', mobile:'12345070277'},
{status: false, id:4, name:'Sanjay 4', mobile:'999988885'},
{status: false, id:5, name:'Sanjay 5', mobile:'999988885'},
{status: false, id:6, name:'Sanjay 6', mobile:'999988885'},
{status: false, id:7, name:'Sanjay 7', mobile:'999988885'},
{status: false, id:8, name:'Sanjay 8', mobile:'999988885'},
{status: false, id:9, name:'Sanjay 9', mobile:'999988885'},
{status: false, id:10, name:'Sanjay 10', mobile:'999988885'},
{status: false, id:11, name:'Sanjay 11', mobile:'999988885'},
{status: false, id:12, name:'Sanjay 12', mobile:'999988885'},
{status: false, id:13, name:'Sanjay 13 ', mobile:'999988885'},
{status: false, id:14, name:'Sanjay 14', mobile:'999988885'},
{status: false, id:15, name:'Sanjay 15', mobile:'999988885'},
{status: false, id:16, name:'Sanjay 16', mobile:'999988885'},
{status: false, id:17, name:'Sanjay 17', mobile:'999988885'},
{status: false, id:18, name:'Sanjay 18', mobile:'999988885'},
{status: false, id:19, name:'Sanjay 19', mobile:'999988885'},
{status: false, id:20, name:'Sanjay 20', mobile:'999988885'},
{status: false, id:21, name:'Sanjay 21', mobile:'999988885'},
{status: false, id:22, name:'Sanjay 22', mobile:'999988885'},
{status: false, id:23, name:'Sanjay 23', mobile:'999988885'},
{status: true, id:24, name:'Zambia 24', mobile:'8888999997'}
]
}

var storeProxy = {
                  type: 'memory',
                  data: mydata
            };
storeProxy.type = 'pagingmemory';
    storeProxy.reader = {
           type: 'json',
           totalProperty: 'totalCount',
           root: 'rows',
           successProperty: 'success'
       };


    var studentStore = Ext.create('Ext.data.Store',{
model: 'Student',
autoLoad: true,
remoteSort: true,
     pageSize: 7,
proxy: storeProxy
});

studentStore.load();
var dockedPagingToolbar = [];
        dockedPagingToolbar = [{
                  xtype: 'pagingtoolbar',
                  store: studentStore,
                  dock: 'bottom',
                  displayInfo: true
            }];

Ext.create('Ext.grid.Panel',{
renderTo: Ext.getBody(),
store: studentStore,
width: 450,
height: 250,
height: 220,
multiSelect: true,
title: 'Student Records',
//plugins: 'gridfilters',
    dockedItems : dockedPagingToolbar,
columns:[
{xtype: 'checkcolumn', text: 'Status', dataIndex:'status', width: 50},
{text: 'Roll Number', dataIndex:'id', width: 100},
{text: 'Name' , dataIndex:'name', width: 100},
{text: 'Mobile' ,dataIndex:'mobile', flex: 1}
]
   });
 
});

</script>
</head>
</html>
Posted by Binod Suman at 9:50 AM 0 Put a Comments

Thursday, January 22, 2015

Extjs 5.1.0 Ext.data.field.convert example How to perform some processing when we load a Field's data in Extjs 5.1.0 

Some time you feel to create new column in grid based on the existing column like create firstname from given full name or create insertion date.



Sometimes a simple type isn't enough, or we want to perform some processing when we load a Field's data. We can do this using a convert function. Here, we're going to create a new field based on another:



When reading fields it is often necessary to convert the values received before using them or storing them in records. To handle these cases there is the convert method.

For example 1:

 
{
            name: 'firstName',
            convert: function(value, record) {
                var fullName  = record.get('name'),
                    splits    = fullName.split(" "),
                    firstName = splits[0];

                return firstName;
            }
        }
For Example 2: 

 
{
     name: 'timestamp',

     convert: function (value) {
         return new Date(value);
     }
 }




Complete Example:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>ExtJS Grid Example</title>
    <link rel="stylesheet" href="extjs-5.1.0/packages/ext-theme-gray/build/resources/ext-theme-gray-all.css"/>
    <script src="extjs-5.1.0/extjs5.1.0-all-dashboard.js"></script>
    <script>
 
Ext.onReady(function(){
   
   Ext.define('Student',{
   extend: 'Ext.data.Model',
   fields:[
    {name: 'id'},
    {name: 'name'},
    {name: 'mobile'},
    {name: 'TestColumn',
     convert : function(value, record){
    return record.get('name')+" CHECK";
  }
     
    }
   ]
   });
 
    var studentStore = Ext.create('Ext.data.Store',{
  model: 'Student',
  autoLoad: true,
  data:[
  {status: true, id:'1', name:'Binod', mobile:'9900159257'},
  {status: false, id:'5', name:'Ishan', mobile:'9902887325'},
  {status: true, id:'3', name:'Akshu', mobile:'90351070277'},
  {status: false, id:'4', name:'Sanjay', mobile:'999988885'},
  {status: true, id:'2', name:'Zambia', mobile:'8888999997'}
  ]
 
 }); 
   
  var selectionchangefired = false;
 
 Ext.create('Ext.grid.Panel',{
 renderTo: Ext.getBody(),
 store: studentStore,
 width: 450,
 height: 200,
 multiSelect: true,
 title: 'Student Records',
 plugins: 'gridfilters',
 
 columns:[
  {xtype: 'checkcolumn', text: 'Status', filter: 'string', dataIndex:'status', width: 50},
  {text: 'Roll Number', filter: 'string', dataIndex:'id', width: 100},
  {text: 'Name' , filter: 'string',dataIndex:'name', width: 100},
  {text: 'Mobile' , filter: 'string',dataIndex:'mobile', flex: 1},
  {text: 'Test Column' , filter: 'string',dataIndex:'TestColumn', flex: 1},
  
 ],
 
 
 
 dockedItems: [{
        xtype: 'pagingtoolbar',
        store: studentStore,   // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
    }]
 
 
 
 });  
   
   
 });
  


 </script>
 </head>
 </html>
Here, Test column is generated during run time based on other field.
Posted by Binod Suman at 9:58 AM 0 Put a Comments

Thursday, January 15, 2015

Extjs 5.1.0 Checkbox of GridPanel deselect event not working. checkboxmodel deselect not working


I think, this is a bug in Extjs 5.1.0 for CheckboxModel selectionchange doesn't fire when unselect rows.

Add below code where you define selModel:

selectWithEventMulti: function(record, e, isSelected) {
            var me = this;

            if (!e.shiftKey && !e.ctrlKey && e.getTarget(me.checkSelector)) {
                if (isSelected) {
                    me.doDeselect(record); // Second param here is suppress event, not "keep selection"
                } else {
                    me.doSelect(record, true);
                }
            } else {
                me.callParent([record, e, isSelected]);
            }
        },

After adding this above code, your selModel should be like this:

this.selModel = new Ext.selection.CheckboxModel( {
         allowDeselect: true,
         checkOnly: false,
         pruneRemoved: false,
         ignoreRightMouseSelection: true,
         injectCheckbox: 0,

    // ** Newly added code to fix bug
    selectWithEventMulti: function(record, e, isSelected) {
            var me = this;

            if (!e.shiftKey && !e.ctrlKey && e.getTarget(me.checkSelector)) {
                if (isSelected) {
                    me.doDeselect(record); // Second param here is suppress event, not "keep selection"
                } else {
                    me.doSelect(record, true);
                }
            } else {
                me.callParent([record, e, isSelected]);
            }
        },
   
// *************************
        showHeaderCheckbox: true,
         listeners: {
            deselect: function( obj, record, index, eOpts ) {
               alert("check box deselect");
            },
            select: function( obj, record, index, eOpts ) {
               alert("check box select");
            }
         },

Reference: http://www.sencha.com/forum/showthread.php?295764

Posted by Binod Suman at 4:19 AM 0 Put a Comments

Extjs 5.1 GridPanel plugins: 'gridfilters' and listeners example


Example contains multiSelect, plugins, checkchange and grid panel listeners.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Extjs 5.1 Grid Panel</title>
    <link rel="stylesheet" href="extjs-5.1.0/packages/ext-theme-gray/build/resources/ext-theme-gray-all.css"/>
    <script src="extjs-5.1.0/extjs5.1.0-all-dashboard.js"></script>
    <script>
Ext.onReady(function(){
 console.log("I am ready now");

 Ext.define('Student',{
 extend: 'Ext.data.Model',
 fields: ['id','name','mobile']
 });

    var studentStore = Ext.create('Ext.data.Store',{
model: 'Student',
autoLoad: true,
data:[
{status: true, id:'1', name:'Binod', mobile:'0000059257'},
{status: false, id:'5', name:'Ishan', mobile:'0002887325'},
{status: true, id:'3', name:'Akshu', mobile:'00351070277'},
{status: false, id:'4', name:'Sanjay', mobile:'999988885'},
{status: true, id:'2', name:'Zambia', mobile:'8888999997'}
]

});


Ext.create('Ext.grid.Panel',{
renderTo: Ext.getBody(),
store: studentStore,
width: 450,
height: 200,
multiSelect: true,
title: 'Student Records',
plugins: 'gridfilters',
listeners:{
 selectionchange: 'rowclickedevent',
 rowclick: 'rowevent'
},
columns:[
//{xtype: 'checkcolumn', listeners :{check: 'checkchangeEvent'},text: 'Status', filter: 'string', dataIndex:'status', width: 50},
{
xtype: 'checkcolumn',
text: 'Status',
dataIndex: 'status',
flex: 1,
sortable: false,
listeners:{
checkchange:function(cc,ix,isChecked){
alert("Check box is clicked and value is : "+isChecked);
}
}
     },
{text: 'Roll Number', filter: 'string', dataIndex:'id', width: 100},
{text: 'Name' , filter: 'string',dataIndex:'name', width: 100},
{text: 'Mobile' , filter: 'string',dataIndex:'mobile', flex: 1}
],



dockedItems: [{
        xtype: 'pagingtoolbar',
        store: studentStore,   // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
    }],

checkchangeEvent : function(  cc,ix,isChecked ){
 alert("Check box is clicked and value is : "+isChecked);
},

rowevent : function(c, record, tr, rowIndex, e, eOpts){
   alert("row click number :"+record.length);
},

rowclickedevent : function(c, selected, eOpts){
 alert("selectionchange selected number :"+selected.length);
}

});


});

</script>
</head>
</html>
Posted by Binod Suman at 1:43 AM 0 Put a Comments

ExtJs 5.1 GridPanel Plugin gridfilters Example Getting Start


Here we will use plugins: 'gridfilters', for adding filter functionality in GridPanel.
This plugins: 'gridfilters', is new plugin has been added in ExtJS 5.1 for filter to reduce a lot of codes.

Use this plugins: 'gridfilters', in create/define during Ext.grid.Panel and then add filter: 'string', in each column to get this filter functionality.



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Extjs 5.1 Grid Panel</title>
    <link rel="stylesheet" href="extjs-5.1.0/packages/ext-theme-gray/build/resources/ext-theme-gray-all.css"/>
    <script src="extjs-5.1.0/extjs5.1.0-all-dashboard.js"></script>
    <script>
Ext.onReady(function(){
 console.log("I am ready now");

 Ext.define('Student',{
 extend: 'Ext.data.Model',
 fields: ['id','name','mobile']
 });

    var studentStore = Ext.create('Ext.data.Store',{
model: 'Student',
autoLoad: true,
data:[
{status: true, id:'1', name:'Binod', mobile:'0000059257'},
{status: false, id:'5', name:'Ishan', mobile:'0002887325'},
{status: true, id:'3', name:'Akshu', mobile:'00351070277'},
{status: false, id:'4', name:'Sanjay', mobile:'999988885'},
{status: true, id:'2', name:'Zambia', mobile:'8888999997'}
]

});


Ext.create('Ext.grid.Panel',{
renderTo: Ext.getBody(),
store: studentStore,
width: 450,
height: 200,
title: 'Student Records',
plugins: 'gridfilters',
columns:[
{xtype: 'checkcolumn', text: 'Status', filter: 'string', dataIndex:'status', width: 50},
{text: 'Roll Number', filter: 'string', dataIndex:'id', width: 100},
{text: 'Name' , filter: 'string',dataIndex:'name', width: 100},
{text: 'Mobile' , filter: 'string',dataIndex:'mobile', flex: 1}
],



dockedItems: [{
        xtype: 'pagingtoolbar',
        store: studentStore,   // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
    }]

});


});

</script>
</head>
</html>

Now if you click on any column, you will get filter functionality.

Posted by Binod Suman at 1:26 AM 0 Put a Comments

ExtJs 5.1 GridPanel Basic Example Getting Start

Found some changed while migrating my product from Extjs 4 5o Extjs 5.1, so thought to share with you all.
Here below is very basic example of GridPanel:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Extjs 5.1 Grid Panel</title>
    <link rel="stylesheet" href="extjs-5.1.0/packages/ext-theme-gray/build/resources/ext-theme-gray-all.css"/>
    <script src="extjs-5.1.0/extjs5.1.0-all-dashboard.js"></script>
    <script>
Ext.onReady(function(){
 console.log("I am ready now");

 Ext.define('Student',{
 extend: 'Ext.data.Model',
 fields: ['id','name','mobile']
 });

    var studentStore = Ext.create('Ext.data.Store',{
model: 'Student',
autoLoad: true,
data:[
{status: true, id:'1', name:'Binod', mobile:'0000059257'},
{status: false, id:'5', name:'Ishan', mobile:'0002887325'},
{status: true, id:'3', name:'Akshu', mobile:'00351070277'},
{status: false, id:'4', name:'Sanjay', mobile:'999988885'},
{status: true, id:'2', name:'Zambia', mobile:'8888999997'}
]

});


Ext.create('Ext.grid.Panel',{
renderTo: Ext.getBody(),
store: studentStore,
width: 450,
height: 200,
title: 'Student Records',
columns:[
{xtype: 'checkcolumn', text: 'Status', dataIndex:'status', width: 50},
{text: 'Roll Number', dataIndex:'id', width: 100},
{text: 'Name' , dataIndex:'name', width: 100},
{text: 'Mobile' , dataIndex:'mobile', flex: 1}
],

dockedItems: [{
        xtype: 'pagingtoolbar',
        store: studentStore,   // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
    }]



});


});

</script>
</head>
</html>

Here dockedItems has been used for pagination.


Posted by Binod Suman at 1:09 AM 0 Put a Comments
Subscribe to: Posts (Atom)