Thursday, January 15, 2015

Extjs 5.1 GridPanel plugins: 'gridfilters' and listeners example

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

<!DOCTYPE html>
<html lang="en">
    <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>
 console.log("I am ready now");

 extend: '',
 fields: ['id','name','mobile']

    var studentStore = Ext.create('',{
model: 'Student',
autoLoad: true,
{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'}


renderTo: Ext.getBody(),
store: studentStore,
width: 450,
height: 200,
multiSelect: true,
title: 'Student Records',
plugins: 'gridfilters',
 selectionchange: 'rowclickedevent',
 rowclick: 'rowevent'
//{xtype: 'checkcolumn', listeners :{check: 'checkchangeEvent'},text: 'Status', filter: 'string', dataIndex:'status', width: 50},
xtype: 'checkcolumn',
text: 'Status',
dataIndex: 'status',
flex: 1,
sortable: false,
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);




No comments:

Post a Comment

You can put your comments here (Either feedback or your Question related to blog)