I am having trouble making a grid using Ext js .so for i did store and grid.it is working fine.but my problem is,i have 14000 record,it is displayed in a grid ,single shot.but i want to display only 100 records and next 100 records like a page display.i used the paging toolbar but still i am not get it. please some body help me by posting your code. thanks in advance. [sorry for my english]
function some function(url)
{
Ext.define('some model', {
extend: 'Ext.data.Model',
fields: some fields
});
var store = Ext.create('Ext.data.Store',{
id:'store',
model:'some model',
remoteGroup:true,
remoteSort:true,
proxy: {
type:'rest',
url:url
reader: {
type: "json",
root:"myroot",
idProperty:'id'
}
},
autoLoad:true
});
return store;
}
var store= some function(url);
var grid = Ext.create('Ext.grid.Panel', {
id:'Grid',
title:'__________',
store: store,
loadMask: true,
width:'100%',
autoHeight:true,
viewConfig: {
emptyText:'No Available'
},
frame:false,
columns:[
{
id: 'c',
header:'bla',
dataIndex:'12',
width:'35%',
sortable:true,
},
{
id: 's',
header:'bla',
dataIndex:'21212',
width:'65%',
sortable:true,
}
],
bbar: new Ext.PagingToolbar({
store:store,
pageSize:10,
id:'paging',
displayInfo:true,
displayMsg:'Displaying {0} - {1} of {2}',
emptyMsg: "No Available",
prependButtons:false
}),
});
Your grid should something like this
Ext.define('Com.grid.myGrid',{
extend:'Ext.grid.Panel',
alias:'widget.myGridAlias',
store:'myStore',
initComponent:function()
{
this.bbar = Ext.create('Ext.PagingToolbar', {
store : this.store,
displayInfo : true,
displayMsg : 'Records {0} - {1} of {2}',
emptyMsg : 'No files.'
});
}
});
and and your Store should something like this
Ext.define('Com.store.myStore',{
extend:'Ext.data.Store',
model : 'myModel',
//autoLoad:true,
pageSize: 100
});