Disable automatic sorting by property grid in ExtJS

Question

I am dealing with a property grid. I want to prevent the automatic sorting of column names for a property grid. here is my code. The bold highlighted code is my source of the property grid, and its order is similar to what I want to see. But Ext is an automatic sorting of column orders alphabetically. How can I prevent this?

Thanks for any suggestion.

 Ext.ns ('Application.propertygrid');  Application.propertygrid.FileDetail = Ext.extend (Ext.grid.PropertyGrid, {title: 'File Detail', height: 200, border: false, stripeRows: true, flex: 1, initComponent: function () {Application.propertygrid. FileDetail.superclass.initComponent.apply (this, arguments);}, source: {Name: 'Please select a file', Type: 'Please select a file', Size: 'Please select a file', Path: 'Please select a file ', FullPath:' Please select a file ', Width:' Please select a file ', Height:' Please select a file '}, listeners: {beforeedit: function () {return false; // prevent editing}, headerclick: function () {return false; // prevent column sorting on click}}}) Ext.reg ('filedetail', Application.propertygrid.FileDetail); 

Answer 1

Yes. I am done with this. And here is the solution.

  var p = new Ext.grid.PropertyGrid ({
   ...
   // do not specify 'source' here
 });

 delete p.getStore (). sortInfo;  // Remove default sorting
 p.getColumnModel (). getColumnById ('name'). sortable = false;  // set sorting of first column to false
 p.setSource (source);  // Now load data

Answer 2

This will not work for Extjs 4:

delete p.getStore().sortInfo; // Remove default sorting p.getColumnModel().getColumnById('name').sortable = false; // set sorting of first column to false p.setSource(source); // Now load data 

You can try the following:

 p.getStore().sorters.items = [] // which should remove sorting information from the store p.setSource(source) // now load the data 

Answer 3

For Extjs 3.4, you only need to:

 delete propertygrid.getStore().sortInfo; 

Answer 4

So I do this: When I define my columns, I set the sortable property to false , and I define my own "sortable flag", for example:

 var column = { xtype: 'column-component', ... sortable: false, sortableColumn: true } 

Later, when the user clicks on the column heading (the headerclick event is headerclick ), and I check if the column is sorted or not, for example:

 onHeaderClick: function(ct, column, e) { if (column.sortableColumn) { // do your own sorting ... } }