PDA

View Full Version : Grid Paging not work with ajax request?????



talek69
6 Nov 2013, 7:01 AM
Hi,

I am using Extjs 4.2.1 and I am trying to paging in memory json data from an ajax request in a grid. I saw the data in my grid and the controls of paging but the info is not paged...any idea?. Here is my code:

THE JSON DATA OBJECT FROM THE REQUEST


{"totalCount":30,
"results":
[
{"idClasArticulo":3,"txtClasArticulo":"PRUEBA 1"},
{"idClasArticulo":15,"txtClasArticulo":"PRUEBA 10"},
{"idClasArticulo":16,"txtClasArticulo":"PRUEBA 11"},
{"idClasArticulo":17,"txtClasArticulo":"PRUEBA 12"},
{"idClasArticulo":18,"txtClasArticulo":"PRUEBA 13"},
{"idClasArticulo":19,"txtClasArticulo":"PRUEBA 14"},
{"idClasArticulo":20,"txtClasArticulo":"PRUEBA 15"},
{"idClasArticulo":21,"txtClasArticulo":"PRUEBA 16"},
{"idClasArticulo":22,"txtClasArticulo":"PRUEBA 17"},
{"idClasArticulo":23,"txtClasArticulo":"PRUEBA 18"},
{"idClasArticulo":24,"txtClasArticulo":"PRUEBA 19"},
{"idClasArticulo":2,"txtClasArticulo":"PRUEBA 2"},
{"idClasArticulo":25,"txtClasArticulo":"PRUEBA 20"},
{"idClasArticulo":26,"txtClasArticulo":"PRUEBA 21"},
{"idClasArticulo":27,"txtClasArticulo":"PRUEBA 22"},
{"idClasArticulo":28,"txtClasArticulo":"PRUEBA 23"},
{"idClasArticulo":29,"txtClasArticulo":"PRUEBA 24"},
{"idClasArticulo":30,"txtClasArticulo":"PRUEBA 25"},
{"idClasArticulo":31,"txtClasArticulo":"PRUEBA 26"},
{"idClasArticulo":32,"txtClasArticulo":"PRUEBA 27"},
{"idClasArticulo":33,"txtClasArticulo":"PRUEBA 28"},
{"idClasArticulo":34,"txtClasArticulo":"PRUEBA 29"},
{"idClasArticulo":1,"txtClasArticulo":"PRUEBA 3"},
{"idClasArticulo":35,"txtClasArticulo":"PRUEBA 30"},
{"idClasArticulo":9,"txtClasArticulo":"PRUEBA 4"},
{"idClasArticulo":10,"txtClasArticulo":"PRUEBA 5"},
{"idClasArticulo":11,"txtClasArticulo":"PRUEBA 6"},
{"idClasArticulo":12,"txtClasArticulo":"PRUEBA 7"},
{"idClasArticulo":13,"txtClasArticulo":"PRUEBA 8"},
{"idClasArticulo":14,"txtClasArticulo":"PRUEBA 9"}
]}


THE MODEL


var model = Ext.define('Results', {
extend: 'Ext.data.Model',
fields: [{
name:'idClasArticulo',
type:'string'
}, {
name:'txtClasArticulo',
type:'string'
}],
idProperty: 'idClasArticulo'
});



THE STORE

var store = Ext.create('Ext.data.Store', {
model: model,
pageSize: 10,

proxy: {
type: 'ajax',
url: '/maestros/selectAll'
enablePaging: true,
reader: {
totalProperty: 'totalCount',
root: 'results'
}
}]
});


THE GRID


var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
width: 700,
height: 500,
store: store,
columns: [{
text: 'ID',
dataIndex: 'idClasArticulo'
}, {
text: 'NOMBRE',
dataIndex: 'txtClasArticulo'
}], bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})

scottmartin
7 Nov 2013, 8:40 PM
You are sending all 30 records, but your page size is 10

Paging does not filter the records, it only calcs the number of pages.

[code]
{"totalCount":30,
"results":
[ only the 1st 10 records ]

}

Each page will send the next 10 records using SELECT ... LIMIT start, end

Scott.

scottmartin
7 Nov 2013, 8:45 PM
Attached is an example using PHP

mkm_2013
11 Nov 2013, 11:30 AM
I am migrating extjs3.2 to 4.2 and facing lot of problems. The pagingtoolbar only shows text , it doesnot show the paging controls like prev, next, last, first buttons. Any idea why is this. Please help me i am new to extjs.

subjectPager = Ext.create('Ext.PagingToolbar',{

store:subjectStore,
displayInfo:true,
pageSize:15,
dock:'bottom',
displayMsg:'Displaying Subjects {0} - {1} of {2}',
emptyMsg:'No Subjects to display'
});

scottmartin
11 Nov 2013, 12:51 PM
Here is a small example of paging:

1gi

Scott

mkm_2013
12 Nov 2013, 5:44 AM
Thanks [COLOR=#444444][FONT=Helvetica Neue]scottmartin.
I tried that too but still paging controls are not shown.

I have uploaded the screenshot.
Here is my code of paging toolbar and gridpanel



var subjectGrid = Ext.create('Ext.grid.Panel',{

width:700,
height:580,
id:'subjectGrid',
enableColumnMove:false,
// stripeRows:true,
frame:true,
// enableHdMenu:false,
store:subjectStore,

selModel:cbsm,
viewConfig: {
stripeRows: true,
},


columns:[

//{ cbsm},
{
header:'Subject ID',
width:100,
sortable:true,
dataIndex:'subjectId',
align:'center',
type:'String'
},
{
header:'Letter Code',
width:100,
sortable:true,
dataIndex:'letterCd',
align:'center',
type:'String'
},
{
header:'Subject Status',
width:100,
sortable:true,
dataIndex:'statusCd',
align:'center',
type:'String'
},
{
header:'Locked',
width:55,
sortable:false,
dataIndex:'locked',
align:'center',
type:'String',
sortable:true
},
{
header:'Enrollment Date',
width:115,
sortable:true,
dataIndex:'enrollmentDt',
align:'center',
type:'date',
renderer:Ext.util.Format.dateRenderer('M-d-Y')
},
{
header:'Deactivate Date',
width:115,
sortable:true,
dataIndex:'deactiveDt',
align:'center',
type:'date',
renderer:Ext.util.Format.dateRenderer('M-d-Y')
},
{
name:'edit',
width:80,
dataIndex:'editButton',
align:'center',
flex:1,
renderer:function (v, params, record) {
var isEdit = true;
if (isEdit) {
var index = subjectStore.indexOf(record);

var locked = record.get('locked');

if(locked == 'Locked') {
return '<span onclick="javascript:viewSubject(' + index + ')" style="cursor:pointer;color:#E37200;"><img width="16" height="16" src="/pageComponents/images/view_form_icon.gif" style="vertical-align: middle;">View</span>';
} else {
return '<span onclick="javascript:editSubject(' + index + ')" style="cursor:pointer;color:#E37200;"><img width="16" height="16" src="/pageComponents/images/icon_edit_document.png" style="vertical-align: middle;"> Edit</span>';
}


} else return ('<span></span>');
}
}],

title:'Manage Subjects',
clicksToEdit:1,
loadMask:true,

dockedItems:[
{
tbar:[
{
xtype:'tbfill'
},
{xtype :'tbtext',text:'Search: '},
{
xtype:'trigger',
name:'field-search',
width:200,
emptyText:'Enter Subject ID',
triggerClass:'x-form-search-trigger',
listeners:{
'specialkey':function (ff, e) {
if (e.getKey() == e.ENTER) {
searchString = this.getValue();
// subjectStore.setBaseParam('search', searchString);
subjectStore.load({
params:{
search:searchString,
start:0,
limit:15
}
});
}
}
},
onTriggerClick:function (val) {
searchString = this.getValue();
// subjectStore.setBaseParam('search', searchString);
subjectStore.load({
params:{
search:searchString,
start:0,
limit:15
}
});
}
},
{
text:'Add',
id:'addLink',
icon:'/pageComponents/images/list-add.png',
cls:'x-btn-text-icon',
tooltip:{
title:'Manage Subject',
text:'Add a new Subject'
},
handler:function () {
editFlag = false;
editSubject(-1);
}
},
{
xtype:'tbseparator'
},
{
text:'Lock Subjects',
id:'lockSubjects',
tooltip:{
text:'Lock Subjects'
},
handler:handleLockSubject
},
{
xtype:'tbseparator'
},
{
text:'Unlock Subjects',
id:'unlockSubjects',
tooltip:{
text:'Unlock Subjects'
},
handler:handleUnlockSubject
}
],
dock:'top'
},
{
bbar:subjectPager ,
dock:'bottom'
}
],

renderTo:Ext.get('manage-subjects')
});

scottmartin
12 Nov 2013, 6:01 AM
I update the example I posted to use your approach and it work as well.

Please verify this. I would suspect you have some bad CSS as you seem to have several alignment issues.

I would isolate your code down to just a grid in a quick example and then proceed from there.

Scott.

mkm_2013
12 Nov 2013, 7:32 AM
Thanks Scott for the input. I am new to extjs and frontend. rpogramming. I am migrating from extjs3.2 to 4.2 and using css from extjs3.2.
I have the migration document and following it.
To change the css , how should i proceed?

scottmartin
12 Nov 2013, 7:40 AM
Not having your code, it would be difficult to say ..

You could remove the CSS, but that might break even more, but you can try to see if that fixes the grid issue. See if there are any CSS rule for the grid and comment those out.

I would simply create a small stand-alone test case with a grid and see if you can get that working.

After that, you will need to debug your application.

As for migrating apps, I have always found it easier to simply start over vs trying to move over legacy code/styles.

Scott.

mkm_2013
12 Nov 2013, 8:30 AM
Hi Scott,
Thanks for sharing the info.
I removed the legacy css and built new. This fixed my problem . Thanks again.