PDA

View Full Version : ColumnModel for PropertyGrid is not working !



vbulcan99
8 Sep 2010, 4:51 PM
Hi,

can somebody help me please to show fields headers instead of original fields names in PropertyGrid

- 'Average Amount' instead of 'average_amount' and 'CommPlan' instead of 'comm_plan' - (see the code bellow).

I try to use columns and colModel property but nothing help.

If you just give me the link with example how to load dynamically Datastore in PropertyGrid and apply collumns headers will be very tankful.

The code that I am using is:



var proxy = new Ext.data.HttpProxy({
url: 'server.php'
});


var reader = new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
fields: [{
id: 'comm_plan',
name: 'comm_plan',
type: 'string',
mapping: 'comm_plan'
},
{
name: 'average_amount',
type: 'string',
mapping: 'average_amount'
}]
});


var columns = new Ext.grid.ColumnModel([{
header: 'CommPlan',
dataIndex: 'comm_plan'
},
{
header: 'Average Amount',
dataIndex: 'average_amount'
}]);


var store = new Ext.data.Store({
baseParams: {
modul: "get_data"
},
id: 'details-store',
proxy: proxy,
reader: reader,
listeners: {
beforeload: function (store, options) {
var propGrid = Ext.getCmp('details-property-grid');
if (propGrid) {
propGrid.loadMask.show();
}
console.log("beforeload listener: " + store.proxy);
},
exception: function (proxy, type, action, options, response, arg) {
console.log("Exception in DetailsPanel.JsonStore");
},
load: function (store, records, options) {
console.log("load listener: " + store.proxy);
var propGrid = Ext.getCmp('details-property-grid');
if (propGrid) {
propGrid.setSource(store.getAt(0).data);
propGrid.loadMask.hide();
}
}
}
});


Ext.onReady(function () {
var detailsPanel = new Ext.grid.PropertyGrid({
autoHeight: true,
loadMask: {
showMask: true
},
id: 'details-property-grid',
listeners: {
beforeedit: function (event) {
event.cancel = true;
}
},
renderTo: 'details',
source: {},
colModel: columns
});

button = new Ext.Button({
renderTo: 'reload-button',
text: 'Reload Property Grid',
handler: function () {
Ext.StoreMgr.lookup('details-store').reload({
params: {
cust: '125'
}
});
}
});
});



Thanks.

13 Sep 2010, 4:33 AM
Look at the property grid example and follow it.

Condor
14 Sep 2010, 6:32 AM
Use the 'propertyNames' config option to specify the display names of properties.