<!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>
No comments:
Post a Comment
You can put your comments here (Either feedback or your Question related to blog)