Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: XML Grid with Pagination Question

  1. #1
    Sencha User Packmule's Avatar
    Join Date
    Sep 2010
    Posts
    10
    Vote Rating
    0
      0  

    Question XML Grid with Pagination Question

    Hi Everyone,

    I'm new to Ext JS and I'm playing around with the Ext Grid's at the moment.
    I've created a Grid that fills it's store from XML which is dynamically generated by an ASP.NET page.
    I've also enabled pagination, but with one issue so far.

    For some reason unbeknown to be, when trying to navigate to another page, the paging controls on the grid update themselves and report that I am now on page X, Y or Z etc... however the records in the grid remain unchanged.

    I only see the first page's records no matter which page I have supposedly navigated to.

    Can anyone suggest a solution?

    I have a feeling I'm just missing out a setting, so I'll post my code if need be, but right now I doubt you'll need it (or maybe I'm wrong?).

    Thanks / Regards

  2. #2
    Sencha User Screamy's Avatar
    Join Date
    Jun 2008
    Posts
    244
    Vote Rating
    0
      0  

    Default

    This problem occurs if your Grid, Store and PagingToolbar are defined as 'xtypes'. The fix is to rebind the store to the PagingToolbar. I documented this problem in detail in the post linked below. In the code sample, look at the 'listeners' section of the grid example:

    http://www.sencha.com/forum/showthre...binding-SOLVED

  3. #3
    Sencha User Packmule's Avatar
    Join Date
    Sep 2010
    Posts
    10
    Vote Rating
    0
      0  

    Question

    Hi Screamy,

    Sorry for the late reply, been very busy! This problem took a back burner.

    Thanks for the help (appreciate it!), but I'm still not 100% certain where I need to make the change in my code.

    Below is my code as it now stands, can you see what I', doing wrong?:

    HTML Code:
    var oListGrid = null;
     
    Ext.onReady(function()
    {
     
    Ext.BLANK_IMAGE_URL = '../js/extjs/resources/images/default/s.gif';
    /**
    * Handler specified for the 'Available' column renderer
    * @param {Object} value
    */
    function formatDate(value) 
    {
    return value ? value.dateFormat('M d, Y') : '';
    }
    // shorthand alias
    var fm = Ext.form;
    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store (created below)
    var cm = new Ext.grid.ColumnModel({
    // specify any defaults for each column
    defaults: {
    sortable: true // columns are not sortable by default 
    },
    columns: [
    {
    id: 'field1',
    header: 'Field1',
    dataIndex: 'field1',
    width: 60, 
    hidden: true,
    // use shorthand alias defined above
    editor: new fm.TextField(
    {
    allowBlank: false
    })
    }, {
    id: 'field2',
    header: 'Field 2',
    dataIndex: 'field2',
    width: 80,
    // use shorthand alias defined above
    editor: new fm.TextField(
    {
    allowBlank: false
    })
    }, {
    id: 'field3',
    header: 'Field 3',
    dataIndex: 'field3',
    width: 250,
    // use shorthand alias defined above
    editor: new fm.TextField({
    allowBlank: false
    })
    }, {
    id: 'field4',
    header: 'Field 4',
    dataIndex: 'field4',
    width: 150,
    // use shorthand alias defined above
    editor: new fm.TextField({
    allowBlank: false
    })
    }, {
    id: 'field5',
    header: 'Field 5',
    dataIndex: 'field5',
    width: 150,
    // use shorthand alias defined above
    editor: new fm.TextField({
    allowBlank: false
    })
    }, {
    id: 'field6',
    header: 'Field 6',
    dataIndex: 'field6',
    width: 100,
    // use shorthand alias defined above
    editor: new fm.ComboBox({
    typeAhead: true,
    triggerAction: 'all',
    // transform the data already specified in html
    transform: 'status',
    lazyRender: true,
    listClass: 'x-combo-list-small'
    })
    },
    {
    header: 'Field 7',
    hidden: true,
    width: 150,
    renderer: formatDate,
    // editor: new fm.DateField({
    // format: 'mmm/dd/yyyy'
    // })
    editor: new fm.TextField({
    allowBlank: false
    })
    }, 
    {
    id: 'field8',
    header: 'Field 8',
    hidden: true,
    dataIndex: 'field8',
    width: 150,
    // use shorthand alias defined above
    editor: new fm.TextField({
    allowBlank: false
    })
    }, 
    {
    header: 'field9',
    hidden: true,
    width: 150,
    renderer: formatDate,
    // editor: new fm.DateField({
    // format: 'm/d/y'
    // })
    editor: new fm.TextField({
    allowBlank: false
    })
    }, {
    id: 'field10',
    header: 'Field 10',
    hidden: true,
    dataIndex: 'field',
    width: 150,
    // use shorthand alias defined above
    editor: new fm.TextField({
    allowBlank: false
    })
    }
    ]
    });
    
    // create the Data Store
    var store = new Ext.data.Store(
    {
    totalProperty: 'total',
    
    remoteSort: true,
    
    // the return will be XML, so lets set up a reader
    reader: new Ext.data.XmlReader(
    {
    // records will have a 'account' tag
    record: 'account',
    
    // use an Array of field definition objects to implicitly create a Record constructor
    fields: [
    // the 'name' below matches the tag name to read, except 'availDate'
    // which is mapped to the tag 'availability'
    { name: 'field1', type: 'string' },
    { name: 'field2', type: 'string' },
    { name: 'field3', type: 'string' },
    { name: 'field4', type: 'string' },
    { name: 'field5', type: 'string' },
    { name: 'field6', type: 'string' },
    { name: 'field7', type: 'date', dateFormat: 'm/d/Y'},
    { name: 'field8', type: 'string'},
    { name: 'field9', type: 'date', dateFormat: 'm/d/Y' },
    { name: 'field10', type: 'string' }
    ]
    }),
    
    // load using HTTP
    url: '../aspx/get/getxmllist.aspx'
    });
    
    // create the grid
    oListGrid = new Ext.grid.GridPanel({
    store: store,
    cm: cm,
    renderTo:'grid-holder',
    title: 'XML Grid Test',
    trackMouseOver:true,
    disableSelection:false,
    loadMask: true,
    width: 770,
    height: 450,
    // paging bar on the bottom
    bbar: new Ext.PagingToolbar(
    {
    pageSize: 25,
    store: store,
    displayInfo: true,
    displayMsg: 'Displaying items {0} - {1} of {2}',
    emptyMsg: "No items to display",
    items:[]
    }),
    
    listeners: 
    {
    afterrender: function(component) 
    {
    // lazy init of JonStore doens't bind correctly on construction, 
    // this fixes the binding.
    component.getBottomToolbar().bindStore(component.store, true);
    
    // do the initial load on the store, passing the params required by the 
    // paging toolbar.
    component.store.load({params: {start: 0, limit: 25}});
    
    alert("afterrender")
    },
    
    rowdblclick : function(grid, rowIndex, e)
    {
    handleGridRowDblClick(grid, rowIndex, e);
    }
    } 
    });
    store.load({params:{start:0, limit:25}});
    });

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890
    Vote Rating
    89
      0  

    Default

    Is your server script actually taking notice of the start and limit parameters and only sending back the page you request?

  5. #5
    Sencha User Packmule's Avatar
    Join Date
    Sep 2010
    Posts
    10
    Vote Rating
    0
      0  

    Default

    Hi Animal,

    How would I know if it was?
    Does the JavaScript post params to the remote page? If so, how do I retreive the params sent?

    Thanks / Regards

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890
    Vote Rating
    89
      0  

    Default

    ?

    It's your app!

  7. #7
    Sencha User Packmule's Avatar
    Join Date
    Sep 2010
    Posts
    10
    Vote Rating
    0
      0  

    Default

    I don't mean that you must tell me specifically, line for line, what code I must write...

    I just wanted to know how Ext JS allows my remote page to access parameters it sends to the page, if it even sends any parameters at all.

    I'm still quite new to everything and haven't yet had enough time to really get familar with the documentation.

    Sorry for the confusion.

  8. #8
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    133
      0  

    Default

    Ext sends the 'start' and 'limit' parameters to the server (and with remoteSort:true also 'sort' and 'dir' parameters).

    Your server should return only <limit> records starting with record <start>, sorted by the <sort> field in direction <dir>.

  9. #9
    Sencha User Packmule's Avatar
    Join Date
    Sep 2010
    Posts
    10
    Vote Rating
    0
      0  

    Default

    Hi Condor,

    Do you know how does Ext sends the parameters?
    Does it HTTP POST them? Would I be able to use the ASP.NET Request.Form["..."] method to retrieve them?

    How should I return the limit parameter? Currently the page it's posting too is returning only XML. Should those parameter be included somewhere in the XML returned or maybe in the HTTP headers?

    Thanks for the help!

  10. #10
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    133
      0  

    Default

    Yes, the parameters are POSTed by default, but you can change that in the proxy.

    I'm not a .NET programmer so I don't know how to process the parameters in thr asp page.

    No, you don't need to return the parameters to the client; just the records and the total count.

Page 1 of 2 12 LastLast

Similar Threads

  1. Pagination in Grid -- Buffered pagination or Override Paging Toolbar
    By jAson bOurnE in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 18 Oct 2010, 1:51 AM
  2. update XML question
    By kurt schrauwen in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 17 Mar 2010, 5:23 AM
  3. Dinamic column model with pagination - pagination problem
    By zharack in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 23 Jun 2009, 12:43 AM
  4. XML question
    By JNason in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 9 Oct 2007, 10:37 AM

Tags for this Thread

Posting Permissions

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