1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    38
    Vote Rating
    0
    elshae is on a distinguished road

      0  

    Default Paging Toolbar Does Not Listen to sortInfo Config

    Paging Toolbar Does Not Listen to sortInfo Config


    Hello ExtJS,

    I have a Ext.data.Store where I set the sortInfo configuration. This was working fine until I added a Ext.PagingToolbar. Now it seems my sortInfo is being ignored and my data is kinda messy. I have been searching for a solution, but have yet to find one.

    Code:
    placeNamesDataStore = new Ext.data.Store({
              id: 'placeNamesDataStore',
              proxy: new Ext.data.HttpProxy({
                        url: 'tibetTestAdmin.php',      // File to connect to
                        method: 'POST'
                    }),
              baseParams: {task: "LISTING"}, // this parameter asks for listing
              reader: new Ext.data.JsonReader({   
                          // we tell the datastore where to get data from
                root: 'results',
                totalProperty: 'total',
                idProperty: 'place_names_id',
              
              fields: [
                {name: 'location', type: 'int', mapping: 'location'},
                {name: 'name', type: 'string', mapping: 'name'},
                {name: 'language', type: 'string', mapping: 'language'},
                {name: 'transliteration', type: 'string', mapping: 'transliteration'},
                {name: 'english_translation', type: 'string', mapping: 'english_translation'},
                {name: 'place_group', type: 'int', mapping: 'place_group'},
                {name: 'located_true', type: 'bool', mapping: 'located_true'},
                {name: 'place_names_id', type: 'int', mapping: 'place_names_id'},
                {name: 'category', type: 'string', mapping: 'category'},
                {name: 'category_id', type: 'int', mapping: 'category_id'}
              ]}),
              remoteSort: true,
              sortInfo:{field: 'location', direction: "ASC"}
              
        });
    
    placeNamesListingEditorGrid =  new Ext.grid.EditorGridPanel({
              id: 'placeNamesListingEditorGrid',
              store: placeNamesDataStore,     // the datastore is defined here
              cm: placeNamesColumnModel,      // the columnmodel is defined here
              enableColLock:false,
              clicksToEdit:1,
              selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
              tbar: [{
                  text: 'Search',
                  tooltip: 'Advanced Search',
                  handler: startAdvancedSearch,  // search function
                  iconCls:'search'               // we'll need to add this to our css
              }],
              bbar: new Ext.PagingToolbar({
                  pageSize: 500,
                  store: placeNamesDataStore,
                  displayInfo: true
              })
    
        });
    
     placeNamesDataStore.load({params: {start: 0, limit: 500}});      // Load the data
         // placeNamesDataStore.sort('location', 'ASC');
    As you can see, I have also tried using sort() after load(), but it did no good. I also tried
    Code:
    placeNamesDataStore.load({params: {start: 0, limit: 500, field: 'location', direction: "ASC"}});
    but that didn't work either. I'd really appreciate any help

    Thanks,

    elshae

  2. #2
    Sencha User johnathanhebert's Avatar
    Join Date
    Apr 2008
    Posts
    77
    Vote Rating
    0
    johnathanhebert is on a distinguished road

      0  

    Default


    When you click on a column header to sort, are you seeing request parameters called "sort" and "dir" on the server side? What are the values for those request parameters?

  3. #3
    Sencha User
    Join Date
    Nov 2010
    Posts
    38
    Vote Rating
    0
    elshae is on a distinguished road

      0  

    Default


    That's another thing...I've reaiized I can't use the menu on the column header to sort. The menu shows but the options 'Sort Ascending' and 'Sort Descending' are greyed out...

  4. #4
    Sencha User johnathanhebert's Avatar
    Join Date
    Apr 2008
    Posts
    77
    Vote Rating
    0
    johnathanhebert is on a distinguished road

      0  

    Default


    In your column model, make sure you give the column config a sortable:true if you want that column to be sortable...

  5. #5
    Sencha User
    Join Date
    Nov 2010
    Posts
    38
    Vote Rating
    0
    elshae is on a distinguished road

      0  

    Default


    Ah thank you for your response. The menu is most certainly accessible on those columns for which I have specified sortable:true, but it doesn't seem to have any effect on certain columns. Here is the parameters you asked me about before for a column which I clicked sort ASC and nothing happened:

    Parametersapplication/x-www-form-urlencoded
    dirASClimit500sortlocationstart0taskLISTINGSource
    start=0&limit=500&task=LISTING&sort=location&dir=ASC


    What I'd really like to happen is have my grid display the entries according to my sortInfo upon loading and have the pagingToolbar behave accordingly. My data was displayed according to the sortInfo before the addition of the pagingToolbar, but I need the pagingToolbar because I have a good 4000+ records loaded and browsers like Firefox warn of unresponsive script when I allow all the records to load at once. Not to mention the pagingToolbar looks slick and professional and certainly more organized

    I hope to fix this problem. Thank you for your continued consideration and time.

    elshae

  6. #6
    Sencha User johnathanhebert's Avatar
    Join Date
    Apr 2008
    Posts
    77
    Vote Rating
    0
    johnathanhebert is on a distinguished road

      0  

    Default


    Well it looks like PagingToolbar is doing its job... since it is passing the correct parameters to the server: start, limit, sort, dir

    So, now you need to make sure your server code is looking at those 4 parameters and sorting the information correctly on the server side, then sending the results back to the client... when you see what the server sends back in the response, are they correctly sorted in the json encoded response text?

  7. #7
    Sencha User
    Join Date
    Nov 2010
    Posts
    38
    Vote Rating
    0
    elshae is on a distinguished road

      0  

    Default


    No I'm afraid they are not sorted correctly in the JSON response. Yes the paging toolbar is doing its job as far as 'paging' the data :p. I just meant that as soon as this nifty toolbar was added my sorting doesn't work. I'd really like to be able to see the first page with entries numbered 1-500, 2 page 501-1000 and so on...

    Thanks again,

    elshae

  8. #8
    Sencha User johnathanhebert's Avatar
    Join Date
    Apr 2008
    Posts
    77
    Vote Rating
    0
    johnathanhebert is on a distinguished road

      0  

    Default


    If they are not sorted correctly in the JSON response, then the error is in the server code, not in the JavaScript... your server logic needs to use the 4 request parameters (start, limit, sort, dir) and send back the number of records for the page, like records 501-1000, in the correct order. Since all 4 parameters are correctly sent to the server by the paging toolbar, you just need to use them correctly on the server side and send back the proper response... for example, the response could look something like this:

    Code:
    {
    	"results":[
    		{"place_names_id":5,"name":"test",etc...},
    		{"place_names_id":6,"name":"another",etc...}
    	],
    	"total":1000
    }
    This tells extjs that you have a total of 1000 records, but here are 2 records for this "page" of the data... if this sample response was generated when start=60 and limit=2, then these would be records 60 and 61 out of 1000... does your response JSON look like the above format? Can you post it?

  9. #9
    Sencha User
    Join Date
    Nov 2010
    Posts
    38
    Vote Rating
    0
    elshae is on a distinguished road

      0  

    Default


    Yes my JSON is formatted this way. Actually this was a big problem for me before, but then I figured that my JSON was in a proper format for my JsonReader.
    Code:
    {"total":4537,"results":[{"location":"3353",
    "name":"\u6717\u53bf\u7cae\u6cb9\u7ba1\u7406\u7ad9",
    "language":"Chinese","transliteration":"Lang Xian Liangyou Guanli Zhan ",
    "english_translation":"Nang (Lang) County Grain and Oil Management Station",
    "place_group":"1522","located_true":"f","place_names_id":"3043",
    "category":"Administrative Management Unit","category_id":"72"},{.....}]}
    That is my current JSON's structure. I kinda get what I gotta do, but not too sure what to do it with. In other words I'm guessing I have to use some parameters which get sent by the paging toolbar to my server query and then send back that result every time the user clicks the paging toolbar. I'm just not sure which event of the paging toolbar to use nor which parameters (My guess is the parameters you had me post up before..) of the paging toolbar to send...

    Thanks,

    elshae

  10. #10
    Sencha User darthwes's Avatar
    Join Date
    Mar 2010
    Posts
    633
    Vote Rating
    -13
    darthwes can only hope to improve

      0  

    Default


    Put the initial sort in Store.baseParams.
    Wes

Similar Threads

  1. Replies: 2
    Last Post: 7 Nov 2010, 11:57 PM
  2. Replies: 2
    Last Post: 26 Apr 2010, 9:03 AM
  3. Replies: 7
    Last Post: 15 Dec 2008, 9:16 AM

Thread Participants: 2

Tags for this Thread