View Full Version : Sorting ListView data

8 Dec 2009, 4:38 PM
I am using a ListView to display a list of names. The underlying ArrayStore has two columns, name and id.

I would like the ListView to sort by default by the name (it will sort by name if I click the column header). It appears to be sorting by id now.

I have set the SortInfo of the ArrayStore to sort by name, but it is not changing the sort behavior of the ListView.

How can I set a default sort column for the ListView? I don't see a way to do this in the API. Is it possible?


var groupMembersDataStore = new Ext.data.ArrayStore({
url: myUrl,
fields: [ 'id', 'name' ],
sortInfo: {
field: 'name',
direction: 'ASC'

Steffen Hiller
8 Dec 2009, 6:27 PM
Hi Brian,

what version of Ext JS are you using?

It's working fine for me with the latest svn trunk of Ext JS, which is the shortly to be released Ext JS 3.1.

Your code is absolutely fine. The default sort option is an option of the store, and not of the ListView.


8 Dec 2009, 6:28 PM
I am on 3.0.3 at the moment.

I'll check back once 3.1 is released.


Steffen Hiller
8 Dec 2009, 7:16 PM
Hmm, it also works for me with 3.0.3.

Go into /examples/view/list-view.js and add

sortInfo: {
field: 'name',
direction: 'DESC'

Open list-view.html in your browser (the file needs to be accessible via a web server for the data loading via ajax request to work)

The name column is sorted on load as I specified it.

With ArrayStore and ListView it's working the same, too.

There must be something else in your code that breaks it. Any listerners maybe?
How do you load your store?

9 Dec 2009, 10:25 AM
It is working perfectly now...
I had applied different code in several places to try to get the sorting to work, once I removed it all except for the sortinfo in the ArrayStore, it works fine.

15 Aug 2012, 9:51 AM
How do we achieve multiple column sort based on header selection?