I'm trying to figure out how to use sourceConfig in PropertyGrid. Nothing seemed to work for me. (v 4.1.1)


For example, take the example here:
http://try.sencha.com/extjs/4.1.0/do....1/viewer.html


If I change the example to include sourceConfig, it does not change the "Available" label:


Starting code:
Code:
/*global Ext:false */
Ext.onReady(function() {
   Ext.create('Ext.grid.property.Grid', {
      title: 'Properties Grid',
      width: 300,
      renderTo: Ext.getBody(),
      source: {
         "(name)": "My Object",
         "Created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
         "Available": false,
         "Version": 0.01,
         "Description": "A test object"
      }
   });
});

One attempt to include sourceConfig (does not change anything - try it!)
I also tried this same code, but without "Available" in quotes - same result.
Code:
/*global Ext:false */
Ext.onReady(function() {
   Ext.create('Ext.grid.property.Grid', {
      title: 'Properties Grid',
      width: 300,
      renderTo: Ext.getBody(),
      source: {
         "(name)": "My Object",
         "Created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
         "Available": false,
         "Version": 0.01,
         "Description": "A test object"
      },
      sourceConfig: {
         "Available" : {
            displayName: "Available displayName" ,
            renderer: function(value) {
               return "Available renderer"
            }
         },
      }
   });
});

Using deprecated propertyNames work:
Code:
/*global Ext:false */
Ext.onReady(function() {
   Ext.create('Ext.grid.property.Grid', {
      title: 'Properties Grid',
      width: 300,
      renderTo: Ext.getBody(),
      source: {
         "(name)": "My Object",
         "Created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
         "Available": false,
         "Version": 0.01,
         "Description": "A test object"
      },
      propertyNames: {
         "Available": "Available propertyName"
      }
   });
});