PDA

View Full Version : Extjs 4 grid paging problem & pagingToolbar next page



bigvillager
14 Sep 2012, 3:34 AM
Hi,
I am new to Sencha, and tried to write a sample application using Grid. I followed the example given in 'Getting started guide'.

Now, I want to use Paging in my grid panel. I followed this link http://docs.sencha.com/ext-js/4-0/#!/guide/grid (http://docs.sencha.com/ext-js/4-0/#%21/guide/grid) and did whatever is mentioned here under the 'Paging' Section .

[1] I used 'pageSize' and 'totalProperty' in my store.

[2] I modified my json file as mentioned in the example.

[3] I put the dockedItem section in my view.

What is happening is that in my Grid View I am getting the paging toolbar. The toolbar shows all the buttons correctly. The only problem is that every time the grid is loading is all the records and grid is scrooling. I have total 5 records, and my pageSize is 2. I want the grid to show first 2 records only at the beginning and when I go to page 2 it should show me from 3 to 5 and so on. But it is always showing up all the 5 records.
Press next button on pagingToolbar, I have an 400 error on server side.

Params : limit : 2, page :2, start :2














Do not send hospitalName.. Why ?


Could someone please guide me, that what I am missing here.

[CODE]
var itemsPerPage = 2;
var groupStore = new Ext.data.JsonStore({
pageSize: itemsPerPage,
proxy : {
type: 'ajax',
url: 'groupListByHospitalName.html',
actionMethods: {
create: 'POST', read: 'POST', update: 'POST', destroy: 'POST'
},
reader: {
type: 'json',
root: 'results',
totalProperty: 'total'
}
},
fields : [{name:"groupId"},{name:"name"},{name:"hospitalName"}]

});

// Create the combo box, attached to the states data store
var hospitalComboBox = Ext.create('Ext.form.ComboBox', {
fieldLabel : 'Hastane',
store : storeHospital,
id :'hospitalComboBox',
allowBlank : false,
width : 360,
blankText : 'Hastane alan? bo? b?rak?lamaz',
//queryMode : 'local',
displayField : 'description',
valueField : 'name',
emptyText: 'Lütfen Hastane Seçiniz',
forceSelection: true,
minChars: 1,
triggerAction: 'all',
mode :'local',
listeners:{
scope: this,
'select': function(combo, rec, idx){

hospitalName = combo.lastSelection[0].raw.name
getAllMobileUserByHospitalStore.removeAll();
isFormGroup.getForm().findField("itemselectorGroup").reset();
getAllMobileUserByHospitalStore.load({
params : {
hospitalName : hospitalName
},
callback :function(){

}
});

groupStore.load({
params : {
hospitalName : hospitalName,
page : 1,
start : 0,
limit :itemsPerPage
},
callback :function(){

}
});

}
}

});

// create the Grid
var gridGroup = Ext.create('Ext.grid.Panel', {
store : groupStore,
id : 'gridGroup',
collapsible : false,
margins : '5 5 0 10',
multiSelect : false,
viewConfig : {
stripeRows : true,
enableTextSelection : true
},
columns : [ {
text : 'Grup Ad?',
flex : 1,
sortable : true,
dataIndex : 'name'
} ],
selModel : Ext.create('Ext.selection.RowModel', {
listeners : {
select : function(rowModel, record, rowIndex) {

var selRecords = rowModel.getSelection();
Ext.getCmp('groupName').setValue(selRecords[0].get('name'));
Ext.getCmp('btnGroupSaveUpdate').setText('Düzelt');
Ext.getCmp('btnGroupSaveUpdate').setIconCls('button-edit');
isNewRecord = false;
Ext.getCmp('btnDelete').enable();
groupId = selRecords[0].get('groupId');
Ext.getCmp('hospitalComboBox').setValue(selRecords[0].get('hospitalName'));

getAllMobileUserByHospitalStore.load({
params : {
hospitalName : hospitalName
},
callback :function(){

}
});

getSelectedMobileUserByGroupStore.load({
params : {
groupId : groupId
},
callback :function(){

var selectedUserValue = new Array(getSelectedMobileUserByGroupStore.getRange().length);
for(var i=0;i<getSelectedMobileUserByGroupStore.getRange().length;i++){
selectedUserValue[i] = getSelectedMobileUserByGroupStore.getAt(i);

}
Ext.getCmp('itemselectorGroup').setValue(selectedUserValue);
}
});

},
scope : this
}
}),
height : 200,
width : 700,
title : 'Tan?ml? Gruplar' ,
dockedItems: [{
xtype: 'pagingtoolbar',
store: groupStore,
dock: 'bottom',
displayInfo: true
}],
tbar: new Ext.Toolbar({
id : 'gridToolbar',
items:[
'->',{
text:'Sil',
iconCls:'button-delete',
id : 'btnDelete',
disabled : true,
handler:function(btn,pressed){

Ext.MessageBox.confirm("Uyar?","Kayd? silmek istedi?inizden emin misiniz?",function(btn2){
if ("yes"==btn2){

Ext.Ajax.request({
url: 'deleteGroup.html',
method: 'POST',
params: {
groupId : groupId,
},
success: function(response, opts) {
var res = eval("(" + response.responseText + ")");
if (res.success == true) {

getAllMobileUserByHospitalStore.removeAll();
groupStore.reload();
Ext.getCmp('btnDelete').disable();
Ext.getCmp('btnGroupSaveUpdate').setText('Ekle');
Ext.getCmp('btnGroupSaveUpdate').setIconCls('button-add');
Ext.getCmp('groupDefinition').getForm().reset();
isNewRecord = true;
selectedGroup = null;
Ext.getCmp('gridGroup').getSelectionModel().deselectAll();
}else{
Ext.MessageBox.alert('Hata', 'Grup tan?mlarken hata olu?tu. Lütfen sistem yöneticinizle ileti?ime geçiniz.');
}

},
failure: function(response, opts) {
Ext.MessageBox.alert('Hata', 'Grup tan?mlarken hata olu?tu. Lütfen sistem yöneticinizle ileti?ime geçiniz.');
}
});
}
});
}
}
]
})

});

[CODE]

Server Side Code
[CODE]
@RequestMapping(value = "groupListByHospitalName.html", method = RequestMethod.POST)
public ModelAndView groupListByHospitalName(
@RequestParam("hospitalName") String hospitalName,
@RequestParam("page") String page,
@RequestParam("start") String start,
@RequestParam("limit") String limit,
Model model, HttpServletResponse response,
HttpServletRequest request) throws ServletException, IOException{
[CODE]

38695

scottmartin
14 Sep 2012, 12:57 PM
Please have a look at the following examples on using CRUD for pagination:
http://www.sencha.com/forum/showthread.php?229457

The idea is that you set the following:
-pageSize: store, pagingToolbar
-send start,limit to store: start: 0, limit: 2
-return total record count (5), send 2 records back

Scott.