Results 1 to 8 of 8

Thread: Pagination not working (Ext JS 4.2.1)

  1. #1

    Default Pagination not working (Ext JS 4.2.1)

    I'm trying to load an paginable grid using server response data. I posted a form through ajax and the server responded with the following JSON data. I'm trying to load the response data to the grid but records are added to the grid but the pagination component does not work. It just shows '0' of '0' page. Can someone help me out what am I doing wrong.

    Post AJAX request
    =============

    var formData = Ext.encode(params);
    Ext.Ajax.request({
    url: '/itpmsPOC/itpms/payment/dailyFinancialReportByCarrier/search.htm',
    method: 'POST',
    headers: { 'Content-Type': 'application/json','Accept':'application/json' },
    params: {page:1, start:0, limit:5},
    jsonData: formData,
    waitTitle:'Connecting',
    waitMsg:'Sending data...',
    success: function (response) {
    gridPanel.add(display);
    //Ext.Viewport.unmask();
    res = Ext.decode(response.responseText, true);
    //Ext.Msg.alert("response from server", res);
    if(res !== null && typeof (res) !== 'undefined') {
    display.store.loadRawData(res);
    }
    },
    failure: function (response) {
    Ext.Msg.alert('Response data FAILURE', response.responseText);
    }
    });

    JSON response from server
    ===================
    {"topics":[{"carrierId":"CASH","beginningARBalance":"200.00","endingARBalance":"500.00","totalDeposit":"100.00","acqCost":"10.00","grossMargin":"5.00","manualDeposit":"50.00"},{"carrierId":"CASH","beginningARBalance":"300.00","endingARBalance":"600.00","totalDeposit":"200.00","acqCost":"20.00","grossMargin":"10.00","manualDeposit":"60.00"},{"carrierId":"CASH","beginningARBalance":"400.00","endingARBalance":"600.00","totalDeposit":"300.00","acqCost":"30.00","grossMargin":"15.00","manualDeposit":"70.00"},{"carrierId":"CASH","beginningARBalance":"500.00","endingARBalance":"700.00","totalDeposit":"400.00","acqCost":"40.00","grossMargin":"20.00","manualDeposit":"80.00"},{"carrierId":"CASH","beginningARBalance":"905.00","endingARBalance":"903.00","totalDeposit":"900.00","acqCost":"90.00","grossMargin":"45.00","manualDeposit":"94.00"},{"carrierId":"CASH","beginningARBalance":"910.00","endingARBalance":"904.00","totalDeposit":"905.00","acqCost":"95.00","grossMargin":"50.00","manualDeposit":"95.00"}],"totalCount":10}


    Model
    =====

    Ext.define('DataItem', {
    extend: 'Ext.data.Model',
    fields: ['carrierId', 'beginningARBalance', 'endingARBalance', 'totalDeposit', 'acqCost', 'grossMargin', 'manualDeposit']
    });

    Grid Panel
    ========

    var store = null;
    Ext.define('TPMSViewer.DataGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.datagrid',
    initComponent: function() {
    Ext.apply(this, {
    store: Ext.create('Ext.data.Store', {
    pageSize: 6,
    model: 'DataItem',
    //remoteSort: true,
    proxy: {
    type: 'ajax',
    headers: { 'Content-Type': 'application/json','Accept':'application/json' },
    noCache: false,
    reader: {
    type: 'json',
    root: 'topics',
    totalProperty: 'totalCount'
    }
    }
    }),
    loadMask: true,
    columns: [
    { text: 'CARRIERID', dataIndex: 'carrierId', sortable: true },
    { text: 'BEGINNINGARBALANCE', dataIndex: 'beginningARBalance', align: 'center' },
    { text: 'ENDINGARBALANCE', dataIndex: 'endingARBalance', align: 'center' },
    { text: 'TOTALDEPOSIT', dataIndex: 'totalDeposit', align: 'center' },
    { text: 'ACQCOST', dataIndex: 'acqCost', align: 'center' },
    { text: 'GROSSMARGIN', dataIndex: 'grossMargin', align: 'center' },
    { text: 'MANUALDEPOSIT', dataIndex: 'manualDeposit', align: 'center' }
    ],
    // paging bar on the bottom
    bbar: {
    xtype: 'pagingtoolbar',
    pageSize: 6,
    store: store,
    displayInfo: true,
    items:[
    '-', {
    text: 'Export'
    }]
    }
    });
    this.callParent(arguments);
    }
    });

  2. #2
    Sencha - Support Team
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    Please see the following based on your setup:

  3. #3

    Default

    Thanks Scott for your response.

    The first page in the paginable grid should not be loaded through store proxy. The first page in the grid is loaded through a POST request to the server, which sends a JSON response back to Ext JS. I'll need to load the store based on the server response. How to do that, I tried store.loadRawData(Ext.decode(response.responseText,true)) but it does not help.

    Once the first page is loaded in the grid, then I will need to use the pagination toolbar component to navigate across pages.

  4. #4
    Sencha - Support Team
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    If you use loadRawData, then you are bypassing the proxy and paging configs. You would need to use load/loadPage()

    I am not sure I understand your requirement for a special ajax call? The response should be handled automatically as my example shows, or do you have a special requirement based on the response?

  5. #5

    Default

    Scott,

    To be more clear, there will be a form where user will enter search criteria values and do a JSON post. The server will process the post request and generate a JSON response.

    This is the code which post the form data as JSON to the server. If you see here, I am sending the params required for pagination as query parameters in the POST request. When the server sends the response it sends the totalCount also (total number of resultsets) in addition to the 5 records as specified in the 'limit' parameter. I am loading the store using the response data. This would load the first page data in the gris. Let me know if there is a better way to handle this kind of requirement.

    var formData = Ext.encode(params);
    Ext.Ajax.request({
    url: '/itpmsPOC/itpms/payment/dailyFinancialReportByCarrier/search.htm',
    method: 'POST',
    headers: { 'Content-Type': 'application/json','Accept':'application/json' },
    params: {page:1, start:0, limit:5},
    jsonData: formData,
    waitTitle:'Connecting',
    waitMsg:'Sending data...',
    success: function (response) {
    gridPanel.add(display);
    //Ext.Viewport.unmask();
    res = Ext.decode(response.responseText, true);
    //Ext.Msg.alert("response from server", res);
    if(res !== null && typeof (res) !== 'undefined') {
    display.store.loadRawData(res);
    }
    },
    failure: function (response) {
    Ext.Msg.alert('Response data FAILURE', response.responseText);
    }
    });

  6. #6
    Sencha - Support Team
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    As mentioned, loadRawData will bypass your config.
    http://docs.sencha.com/extjs/4.2.2/s...od-loadRawData

    Have a look at load / loadPage that call loadToPrefetch() to use your paging information.
    http://docs.sencha.com/extjs/4.2.2/s...re-method-load
    http://docs.sencha.com/extjs/4.2.2/s...ethod-loadPage

  7. #7

    Default

    Did you get any solution for this. If yes kindly share it pls. Even I am trying the same from many days. In your case I know the problem.

    Quote Originally Posted by arun_shank_r View Post
    I'm trying to load an paginable grid using server response data. I posted a form through ajax and the server responded with the following JSON data. I'm trying to load the response data to the grid but records are added to the grid but the pagination component does not work. It just shows '0' of '0' page. Can someone help me out what am I doing wrong.

    Post AJAX request
    =============

    var formData = Ext.encode(params);
    Ext.Ajax.request({
    url: '/itpmsPOC/itpms/payment/dailyFinancialReportByCarrier/search.htm',
    method: 'POST',
    headers: { 'Content-Type': 'application/json','Accept':'application/json' },
    params: {page:1, start:0, limit:5},
    jsonData: formData,
    waitTitle:'Connecting',
    waitMsg:'Sending data...',
    success: function (response) {
    gridPanel.add(display);
    //Ext.Viewport.unmask();
    res = Ext.decode(response.responseText, true);
    //Ext.Msg.alert("response from server", res);
    if(res !== null && typeof (res) !== 'undefined') {
    display.store.loadRawData(res);
    }
    },
    failure: function (response) {
    Ext.Msg.alert('Response data FAILURE', response.responseText);
    }
    });

    JSON response from server
    ===================
    {"topics":[{"carrierId":"CASH","beginningARBalance":"200.00","endingARBalance":"500.00","totalDeposit":"100.00","acqCost":"10.00","grossMargin":"5.00","manualDeposit":"50.00"},{"carrierId":"CASH","beginningARBalance":"300.00","endingARBalance":"600.00","totalDeposit":"200.00","acqCost":"20.00","grossMargin":"10.00","manualDeposit":"60.00"},{"carrierId":"CASH","beginningARBalance":"400.00","endingARBalance":"600.00","totalDeposit":"300.00","acqCost":"30.00","grossMargin":"15.00","manualDeposit":"70.00"},{"carrierId":"CASH","beginningARBalance":"500.00","endingARBalance":"700.00","totalDeposit":"400.00","acqCost":"40.00","grossMargin":"20.00","manualDeposit":"80.00"},{"carrierId":"CASH","beginningARBalance":"905.00","endingARBalance":"903.00","totalDeposit":"900.00","acqCost":"90.00","grossMargin":"45.00","manualDeposit":"94.00"},{"carrierId":"CASH","beginningARBalance":"910.00","endingARBalance":"904.00","totalDeposit":"905.00","acqCost":"95.00","grossMargin":"50.00","manualDeposit":"95.00"}],"totalCount":10}


    Model
    =====

    Ext.define('DataItem', {
    extend: 'Ext.data.Model',
    fields: ['carrierId', 'beginningARBalance', 'endingARBalance', 'totalDeposit', 'acqCost', 'grossMargin', 'manualDeposit']
    });

    Grid Panel
    ========

    var store = null;
    Ext.define('TPMSViewer.DataGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.datagrid',
    initComponent: function() {
    Ext.apply(this, {
    store: Ext.create('Ext.data.Store', {
    pageSize: 6,
    model: 'DataItem',
    //remoteSort: true,
    proxy: {
    type: 'ajax',
    headers: { 'Content-Type': 'application/json','Accept':'application/json' },
    noCache: false,
    reader: {
    type: 'json',
    root: 'topics',
    totalProperty: 'totalCount'
    }
    }
    }),
    loadMask: true,
    columns: [
    { text: 'CARRIERID', dataIndex: 'carrierId', sortable: true },
    { text: 'BEGINNINGARBALANCE', dataIndex: 'beginningARBalance', align: 'center' },
    { text: 'ENDINGARBALANCE', dataIndex: 'endingARBalance', align: 'center' },
    { text: 'TOTALDEPOSIT', dataIndex: 'totalDeposit', align: 'center' },
    { text: 'ACQCOST', dataIndex: 'acqCost', align: 'center' },
    { text: 'GROSSMARGIN', dataIndex: 'grossMargin', align: 'center' },
    { text: 'MANUALDEPOSIT', dataIndex: 'manualDeposit', align: 'center' }
    ],
    // paging bar on the bottom
    bbar: {
    xtype: 'pagingtoolbar',
    pageSize: 6,
    store: store,
    displayInfo: true,
    items:[
    '-', {
    text: 'Export'
    }]
    }
    });
    this.callParent(arguments);
    }
    });

  8. #8
    Sencha User
    Join Date
    Dec 2015
    Location
    Norther Virginia
    Posts
    15

    Default

    This is great in theory but just doesn't work for me. Tried 50 times, there must be something you are leaving out in this example. All i get is a page with a paging toolbar but the columns are scrollable showing all rows.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •