ExtJS PropertyGrid - Dynamically setting source

Question

I am working on a simple PropertyGrid. If I set the source property with some json object at design time, it is displaying properly. But when I tried setting the source data dynamically, it is not displaying data.

This is my code:

ConceptPropertiesPanel = function() {

    this.source = {   ***// if i set source this way, it will work***

 "(name)": "My Object",
 "Created": new Date(Date.parse('10/15/2006')),  
 "Available": false,  
 "Version": .01,     
 "Description": "A test object"
};

ConceptPropertiesPanel.superclass.constructor.call(this, {
    id: 'concetp-properties',
    region: 'east',
    title: 'Concept Properties',
 autoScroll: true,
 margins: '0 5 0 0',
    split: true,
    width: 250,
    minSize: 250,
    maxSize: 400,
    collapsible: true,
 source: {}
})

};

Ext.extend(ConceptPropertiesPanel, Ext.grid.PropertyGrid, {

setSourceData: function(data) { **//I want to set source when the below method is called, but not working**
 this.setSource({
  "(name)": "My Object",
  "Created": new Date(Date.parse('10/15/2006')),  
  "Available": false,  
  "Version": .01,     
  "Description": "A test object"
 });
}

});

This is how I am calling the 'setSourceData' method.

var conceptPropertiesPanel = new ConceptPropertiesPanel();
conceptPropertiesPanel.setSourceData(data);

Can anyone let me know where the problem is in the code?

Answer 1

Just a guess here, but that would be setting Source after the object is already initialized, which would require you to find the object's update to update(), or doLayout() to update the presentation of the data.

Another option is in your original function call to take a config. Something like:

ConceptPropertiesPanel = function(config) {

this.source = config || {   ***// if i set source this way, it will work***

    "(name)": "My Object",
    "Created": new Date(Date.parse('10/15/2006')),  
    "Available": false,  
    "Version": .01,     
    "Description": "A test object"

};