Disable auto sorting on property grid in ExtJS - extjs

Question

I am dealing with property grid. I want to prevent auto sorting of column names for property grid.
here is my code. Bold highlighted code is my source for property grid and its order is just like I want to see. But Ext is auto sorting column orders alphabeticly. How can I prevent that.
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

Yeah. I've done with it. 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 the 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 this:
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 should only need:
delete propertygrid.getStore().sortInfo;

Answer 4

This is the way I do this:
When I define my columns I set the sortable property to false and I define my own 'sortable flag', like this:
var column = {
xtype: 'column-component',
...
sortable: false,
sortableColumn: true
}
Later when a user clicks on the column header (the headerclick event gets triggered) and I check if the column is sortable or not, like this:
onHeaderClick: function(ct, column, e) {
if (column.sortableColumn) {
// do your own sorting ...
}
}