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);

Fatih Acet · Accepted Answer · 2011-07-03T13:14:55.477

8

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

edited Jul 03 '11 at 13:14

answered Dec 04 '10 at 15:29

Fatih Acet

28,690
9
51
58

User may still want to sort the columns but just wants to disable the auto sorting done on rendering. – dwp4ge Sep 17 '13 at 15:33

score 7 · Answer 2 · edited Mar 12 '13 at 13:15

7

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

edited Mar 12 '13 at 13:15

SztupY

10,291
8
64
87

answered Mar 12 '13 at 12:56

Tommy Situ

156
2
5

score 2 · Answer 3 · answered Sep 17 '13 at 15:32

2

For Extjs 3.4 should only need:

delete propertygrid.getStore().sortInfo;

answered Sep 17 '13 at 15:32

dwp4ge

1,963
22
27

score 0 · Answer 4 · answered Sep 04 '14 at 13:24

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

Disable auto sorting on property grid in ExtJS

4 Answers4

Linked