PDA

View Full Version : PropertyGrid setSource dynamic keys?



FlyingFish
6 Aug 2009, 7:57 AM
Hello,

I'm having some trouble attempting to setSource on a PropertyGrid that is using a JSON store. From what I see, it appears that I cannot dynamically set the source key/name. Setting the value is fine, but not for keys.

Example:


var propertyGrid = new Ext.grid.PropertyGrid({
title: 'Properties Grid',
id: 'propGrid',
autoHeight: true,
width: 300,
renderTo: 'prop-grid',
source: {} //initialize source config object
});

var propertyStore = new Ext.data.JsonStore({
autoLoad: true, //autoload the data
url: './controller',
root: 'config',
fields: ['key','value'],
listeners: {
load: {
fn: function(store, records, options){
// get the property grid component
var propGrid = Ext.getCmp('propGrid');
// make sure the property grid exists
if (propGrid) {
// populate the property grid with store data
console.info(store.getAt(0).get('key'));
console.info(store.getAt(0).get('value'));
// The console.info displays correct values.
propGrid.setSource({
// THIS LINE DOES NOT WORK.
store.getAt(0).get('key') : store.getAt(0).get('value')
});

}
}
}
}
});
If I convert the get's of the keys and values to variables, and attempt to setSource({k:v}) using the variables instead, the v is interpreted properly and I see the real value. k is not evaluated and the grid just displays "k" as the name. What am I missing?

Thanks.

Condor
6 Aug 2009, 11:23 AM
PropertyStore fields (Ext.grid.PropertyRecord) are named 'name' and 'value' (so not 'key').

FlyingFish
6 Aug 2009, 12:33 PM
PropertyStore fields (Ext.grid.PropertyRecord) are named 'name' and 'value' (so not 'key').I tried doing that by chaging the fields:

fields: [{name: 'name',mapping: 'key'},'value'],but I don't get the intended results. Here's what I get:

http://i27.tinypic.com/2nqvepv.png

That's what's doesn't make sense. It appears that the 'name' isn't ever interpreted. I'm really looking for is (using the example above):


fetch.XXXXX 2000

I must be totally not understanding how this is supposed to work.

Condor
6 Aug 2009, 12:41 PM
You can't define a javascript object that way. You'll have to use:

var source = {};
source[store.getAt(0).get('key')] = store.getAt(0).get('value');
propGrid.setSource(source);

ps. There is a way to actually load a PropertyGrid from a server (I posted a the code for that in another thread).

FlyingFish
6 Aug 2009, 12:51 PM
OK. That makes sense. As you can tell, I'm a java guy that's new to javascript and it's doesn't transition all that well. It's hard to use the api's if you don't have a good grasp on the language itself... ;)

Thanks again.

FlyingFish
6 Aug 2009, 1:08 PM
As I thought, lack of understanding was the culprit. Here's the full code that worked...



var propertyGrid = new Ext.grid.PropertyGrid({
title: 'Properties Grid',
id: 'propGrid',
autoHeight: true,
width: 600,
renderTo: 'prop-grid',
source: {} //initialize source config object
});

var source = {};

var propertyStore = new Ext.data.JsonStore({
autoLoad: true, //autoload the data
url: './controller',
root: 'config',
fields: ['key','value'],
listeners: {
load: {
fn: function(store, records, options){
// get the property grid component
var propGrid = Ext.getCmp('propGrid');
// make sure the property grid exists
if (propGrid) {
store.each(function(record) {
source[record.get('key')] = record.get('value');
});
propGrid.setSource(source);

}
}
}
}
});Thanks for the help.