PDA

View Full Version : Grid Paging not work with ajax request in Sencha Architect



bevara.siva
25 Feb 2014, 5:30 AM
Hi,
We are using Ext JS 4.2 with Sencha Architect.
We are facing issue implementing Grid paging with Ajax request.

Following is the Store:

Ext.define('ViewSample.store.ClientDataStore', {
extend: 'Ext.data.Store',


requires: [
'ViewSample.model.ClientData',
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json'
],


constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
autoSync: true,
model: 'ViewSample.model.ClientData',
storeId: 'ClientDataStore',
clearOnPageLoad: false,
pageSize: 2,
proxy: {
type: 'ajax',
url: 'data/clients.json',
reader: {
type: 'json',
root: 'data'
}
}
}, cfg)]);
}
});

Model:

Ext.define('ViewSample.model.ClientData', {
extend: 'Ext.data.Model',


requires: [
'Ext.data.Field'
],


fields: [
{
name: 'client'
},
{
name: 'equities'
},
{
name: 'fixedincome'
},
{
name: 'cash'
},
{
name: 'corporatebonds'
},
{
name: 'futures'
},
{
name: 'investments'
}
]
});

View:

Ext.define('ViewSample.view.ClientListings', {
extend: 'Ext.panel.Panel',
alias: 'widget.clientlistings',


requires: [
'Ext.grid.Panel',
'Ext.grid.View',
'Ext.grid.column.Column',
'Ext.form.field.Number',
'Ext.grid.plugin.RowEditing',
'Ext.toolbar.Paging',
'Ext.chart.Chart',
'Ext.chart.series.Pie',
'Ext.button.Button'
],


frame: true,
itemId: 'ClientListings',
margin: '20 20 20 20 ',
title: 'Clients Grid',


layout: {
type: 'vbox',
align: 'stretch'
},


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
flex: 1,
itemId: 'ClientsGrid',
maxHeight: 200,
header: false,
title: 'My Grid Panel',
store: 'ClientDataStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'client',
text: 'Client',
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'equities',
text: 'Equities',
editor: {
xtype: 'numberfield'
}
},
{
xtype: 'gridcolumn',
maxWidth: 120,
width: 120,
defaultWidth: 120,
dataIndex: 'fixedincome',
text: 'Fixed Income',
editor: {
xtype: 'numberfield'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'cash',
text: 'Cash',
editor: {
xtype: 'numberfield'
}
},
{
xtype: 'gridcolumn',
width: 150,
defaultWidth: 150,
dataIndex: 'corporatebonds',
text: 'Corporate Bonds',
editor: {
xtype: 'numberfield'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'futures',
text: 'Futures',
editor: {
xtype: 'numberfield'
}
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'investments',
text: 'Investments'
}
],
listeners: {
select: {
fn: me.onClientsGridSelect,
scope: me
}
},
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})
],
dockedItems: [
{
xtype: 'pagingtoolbar',
dock: 'bottom',
width: 360,
displayInfo: true,
store: 'ClientDataStore'
}
]
},
{
xtype: 'panel',
flex: 1,
frame: true,
layout: 'fit',
title: 'Chart',
items: [
{
xtype: 'chart',
height: 250,
itemId: 'ClientChart',
margin: '10 10 10 10',
width: 400,
animate: true,
insetPadding: 20,
store: 'CleintChartStore',
series: [
{
type: 'pie',
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
},
showInLegend: true,
tips: {
trackMouse: true,
width: 170,
height: 28,
renderer: function(storeItem, item) {

this.setTitle(storeItem.get('name') + ': ' + storeItem.get('value'));
}
},
angleField: 'value'
}
]
}
]
},
{
xtype: 'panel',
flex: 1,
height: 50,
maxHeight: 50,
header: false,
title: 'My Panel',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
items: [
{
xtype: 'button',
flex: 1,
margin: '3 3 3 3',
maxWidth: 70,
width: 70,
text: 'Back',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
}
]
}
]
});


me.callParent(arguments);
},


onClientsGridSelect: function(rowmodel, record, index, eOpts) {
// grab a reference to the qualityChart, notice we use down here instead of child
// because down will go down the container hierarchy at any depth and child
// only retrieves direct children
var chart = this.down('#ClientChart');
// get the quality field out of this record
var qualityData = record.get('investments');
chart.store.loadData(qualityData);
},


onButtonClick: function(button, e, eOpts) {
Ext.getCmp('main').layout.setActiveItem('mainmenu');
}


});


Please help.

Regards,
SivaPrasad.B

scottmartin
25 Feb 2014, 8:15 AM
Are you returning the total records back in your return json?



{
"total" : 10,
"data" : [
// 2 records for page 1
]
}