View Full Version : PropertyGrid JSON can't edit - getCellEditor store.getProperty fails

26 Nov 2010, 4:53 PM
I am struggling with a PropertyGrid linked to a Store. I followed several examples and created a Store underpinned by JsonReader and JsonWriter and an HttpProxy.

The data loads propery, refreshing the grid works fine, BUT, attempting to change any values fails in:

50471 Ext.grid.PropertyColumnModel = Ext.extend(Ext.grid.ColumnModel, {
50559 getCellEditor : function(colIndex, rowIndex){
50560 var p = this.store.getProperty(rowIndex),
50561 n = p.data.name,

(p is undefined)

Poking through the dom suggests that the Property Column Model .store attribute isn't set using the data store, but works fine when "setSource" is used.

var prefs_reader = new Ext.data.JsonReader({
root: 'prefslist',
fields: [
{ name : 'name', mapping : 'pref_key', allowBlank: false },
{ name : 'value', mapping : 'pref_val', allowBlank: true }


var prefs_store = new Ext.data.Store({
autoLoad: true,
proxy: prefs_proxy,
reader: prefs_reader,
writer: prefs_writer,
autoSave: true,
baseParams: { domain: "some-domain-here" }

--- and ---

var prefs_grid = new Ext.grid.PropertyGrid({
id: 'prefs_grid',
region: 'center',
store: prefs_store,
viewConfig : {
forceFit: true
listeners: {
render: {
fn: function(){

prefs_grid.store = prefs_store

Again, the grid loads fine and I can confirm the store attribute is set ok.

The store uses a parameter, which is set using a ComboBox with a listener:

listeners: {
select: { fn: function(cb, record, index){
var store = Ext.StoreMgr.get('store_PREFSLIST');
store.baseParams.domain = cb.getValue();

On load, the store resets the grid.store:

prefs_store.addListener('load', function(store, records, options) {
grid = Ext.getCmp('prefs_grid');
grid.store = store;

I've experimented with manually resetting the PropertyStore above, but this has no effect.

prefs_store.addListener('load', function(store, records, options) {
grid = Ext.getCmp('prefs_grid_id');
grid.store = store;
var store = new Ext.grid.PropertyStore(grid);
grid.propStore = store;

Any suggestions on how to make PropertyGrid work with a Store?? Am I missing something obvious??



27 Nov 2010, 12:05 AM
You can't change the store of a grid by simply assigning a new value to the store property.

It takes a lot more:

grid.reconfigure(store, grid.colModel);
grid.propStore.store.un('update', grid.propStore.onUpdate, grid.propStore);
grid.propStore.store = store;
store.on('update', grid.propStore.onUpdate, grid.propStore);
Disclaimer: Completely untested code!

29 Nov 2010, 11:53 AM
Thanks Condor - I found store re-assignment somewhere else on the forum, so appreciate the clarification.

It appears though that PropertyGrid doesn't support a Store property per se. You can feed one in, and it will display it, but the internal PropertyStore doesn't seem to ever get set appropriately.

If this is indeed a limitation of the PropertyGrid, it really ought to be documented - and if it isn't, a code snippet that demonstrates a working, writeable JSON-store-backed PropertyGrid would be hugely appreciated!

Like countless others (judging by the forums) I too have given up on the PropertyGrid and went with a GridPanel, having spent an inordinate amount of time trying to get it to work... It seems like this component is causing a fair bit of grief to folks starting out with ExtJS...



29 Nov 2010, 11:22 PM
Yes, PropertyGrid has a rather odd implementation. It should have been just an EditorGridPanel with a PropertyColumnModel.