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,927
    Answers
    656
    Vote Rating
    443
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi