Paging Toolbar Does Not Listen to sortInfo Config

[elshae]

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.

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

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

[johnathanhebert]

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?

[elshae]

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

[johnathanhebert]

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

[elshae]

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

[johnathanhebert]

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?

[elshae]

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

[johnathanhebert]

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:

{
	"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?

[elshae]

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.

{"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

[darthwes]

Put the initial sort in Store.baseParams.