1. #1
    Sencha User
    Join Date
    Sep 2008
    Posts
    6
    Vote Rating
    0
    bigvillager is on a distinguished road

      0  

    Default Unanswered: Extjs 4 grid paging problem & pagingToolbar next page

    Unanswered: Extjs 4 grid paging problem & pagingToolbar next page


    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 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]

    grid.jpg

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,998
    Answers
    665
    Vote Rating
    456
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

Thread Participants: 1

Tags for this Thread