disable sorting on property grid

[rekam]

Hi all!

I'm searching for a way to disable sorting on property grid. I tried to put some "sortable" and "defaultSortable" to false at some places, but nothing happens.

like:

var xml = new Ext.grid.PropertyGrid({
    title: 'Properties Grid',
    store: new Ext.grid.PropertyStore({
        sortable: false,
        defaultSortable: false
    }),
    autoHeight: true,
    width: 300,
    source: {},
    renderTo: 'xmlfile'
});
xml.setSource(datas); // datas comes from above

Grid is showing well, but we can sort by name column, which is not what I would like.

I searched for a listener "beforeSort" or something, but didn't find anything in doc.

Should I modify the core of PropertyGrid/PropertyStore, or is there a more sexy way?

thanks,
rekam

[euchiyama]

This doesn't work for you?

    var cm = new Ext.grid.ColumnModel([
             {
              header: "Column1",
              width: 100,
              sortable: false
            },{
              header: "Column2",
              width: 100,
              sortable: true
            },{
              header: "Column3",
              width: 100,
              sortable: true
            }]);

[rekam]

well, it's a property grid so it has not a Column model like normal Grid. There're only "name" and "value" column...

This isn't working

[euchiyama]

Hmm...maybe I'm missing something then...according to the API, PropertyGrid has a CM property.

Here's a code snippet I found out in the forum...maybe you're using it differently

var Property = Ext.data.Record.create([
    {name: 'property'},
    {name: 'value'}
]);    
blankDS = new Ext.data.Store({reader: new Ext.data.XmlReader({}, Property)});
var cm = new Ext.grid.ColumnModel([{
        header: "Property",
        dataIndex: 'property',
        width:120,
        sortable:false,
        fixed:true
    },{
        header: "Value",
        dataIndex: 'value',
        sortable:false,
        editor:new Ext.grid.GridEditor(new Ext.form.TextField())
    }]);
grid = new Ext.grid.PropertyGrid('propertiesGrid', {
    ds: blankDS,
    cm: cm,
    enableColLock:true,
    enableColumnMove: false,
    autoExpandColumn:true,
    loadMask: true,
    stripeRows: true,
    autoScroll:false,
    clicksToEdit: 1
});

grid.render();

[carol.ext]

@euchiyama - that looks like 1.1 code.

[rekam]

Here is a working sample of loading data for a Property Grid asynchronously in ext 2.2 . It's a bit different from a grid, since there's only a source{} property to fill if you want entries in your grid.

It seems it's very different from the grids.

var store = new Ext.data.JsonStore({
    url: 'json.php',
    root: 'xml',
    autoLoad: true,
    fields: [
    	{name: 'tag'},
    	{name: 'content'}
    ],
    listeners: {
    	load: function(store, records, option) {
    		var datas = {};
    		var o = null;
    		for (var i = 0; i < records.length; i++) {
    			o = records[i].data;
    			datas[o.tag] = o.content;
    		}
            var xml = new Ext.grid.PropertyGrid({
                title: 'Properties Grid',
                autoHeight: true,
                width: 300,
                source: {},
                renderTo: Ext.getBody()
            });
            xml.setSource(datas);
    	}
    }
});

and returned json

{"xml":[
{"tag":"pic","content":"test"},
{"tag":"path","content":"x:\/test"},
{"tag":"psst","content":"huks fluks"},
{"tag":" pic","content":true}
]}

from this, I'm just trying to disable sorting...

[euchiyama]

Yes, you're right...I went back and looked at it was 1.x code.

However, in the 2.2 API it says PropertyGrid has a CM and I found this code which is fairly recent:

http://extjs.com/forum/showthread.php?t=43203

                var recordGrid = new xg.PropertyGrid({

                    ds:recordStore

                   ,title:'prop grid'

                   ,height:400

                   ,stripeRows:true

                   ,clicksToEdit:1

                   ,enableCtxMenu:true

                   ,enableColumnResize:true                  

                   ,source: getProductListData[0]

                }); 

                
...
                 recordGrid.getColumnModel().setConfig([

                    // new xg.RowNumberer({}),

                    {header: 'Names', width:50, sortable: false, dataIndex: 'name', id:'name',allowBlank:true}

                   ,{header: 'Value', width:200, sortable: false, dataIndex: 'value', id:'value',allowBlank:true}

                ]);   

[rekam]

Nice, you're right, that's working

The only last problem is that there's a sorting at render, it seems. I pass my datas in a non-alphabetical order and, after render, everything is messed up (well, I mean... ordered alphabetically, which I don't want )

var store = new Ext.data.JsonStore({
    url: 'json.php',
    root: 'xml',
    autoLoad: true,
    fields: [
    	{name: 'tag'},
    	{name: 'content'}
    ],
    listeners: {
    	load: function(store, records, option) {
    		var datas = {};
    		var o = null;
    		for (var i = 0; i < records.length; i++) {
    			o = records[i].data;
    			datas[o.tag] = o.content;
    		}
            var xml = new Ext.grid.PropertyGrid({
                title: 'Properties Grid',
                autoHeight: true,
                width: 300,
                source: {}
            });
            xml.getColumnModel().setConfig([
            	{header: 'Names', width:100, sortable: false, dataIndex: 'name', id:'name',allowBlank:true},
            	{header: 'Value', width:200, sortable: false, dataIndex: 'value', id:'value',allowBlank:true}
            ]);
            xml.render(Ext.getBody());
            xml.setSource(datas);
    	}
    }
});

If there's a solution, I will be interested. But while searching on the forum, I found a TreeGrid which match better what I want, so I will stop using the property grid.

Anyway, thanks!

[Xander75]

Like a lot of people, I have had a tough time trying to stop the sorting of the Property Grid by the 'name' id of the 'Name' column and also to disable the sort on header click.

I could not get any of the other code snippets to work I found on this forum, so this is what I eventually came up with as a workaround. This allows you to resort the Store on any id and remove the resort of the header.

 
var propertyGrid;
 
(Create your store and property grid here... "I used the PropertyGrid method found at http://extjs.com/forum/showthread.php?t=29152")

// Get the Property Grid and set the Name of column 0 to 'Name' this
// removes the sort arrow, next we sort the Store on the 'text'
propertyGrid = Ext.getCmp('pg'); 
propertyGrid.getColumnModel().setColumnHeader(0, 'Name')
propertyGrid.store.sort('text','ASC');


// On the click of the mouse button this fires the suspendEvents function
// only if the mouse y-Axis is over the Property Grid header before calling 
// the resumeEvents function. 
propertyGrid.on('mousedown', function(e){
    var xy = e.getXY();
    e.stopEvent();
    if (xy[1] <= 70){
        propertyGrid.suspendEvents();
        setTimeout("propertyGrid.resumeEvents();", 250);
    } else {
        propertyGrid.resumeEvents();
    }
    return true;
});

Like I say, it's a crude method but gets around the issue.

Hope it helps at least 1 person to overcome the sorting method of the PropertyGrid.

[Condor]

Couldn't you simply use:

propertyGrid.colModel.config[0].sortable = false;