Disable auto sorting on property grid in 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);

Herald

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

Herald

User may still want to sort the columns but just wants to disable the auto sorting done on rendering. – Airdrie

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

Lychnis

Answer 3

For Extjs 3.4 should only need:

delete propertygrid.getStore().sortInfo;

Airdrie

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

Marta