extJS: reading a nested JSON

Question

I have a pretty nested JSON coming from a ldap_search() call. I would like to use this information to populate an ExtJS ComboBox, but I am facing some troubles with the reader.

Answer 1

Yep, that JSON structure is not going to work straight away with standard ExtJS JSONReader. Take a look at this example taken from the ExtJS API documentation on how the JSON should look like.

{
    results: 2000, // Reader's configured totalProperty
    rows: [        // Reader's configured root
        // record data objects:
        { id: 1, firstname: 'Bill', occupation: 'Gardener' },
        { id: 2, firstname: 'Ben' , occupation: 'Horticulturalist' },
        ...
    ]
}

Also, the root config option is required, you cannot leave it empty. In the above example your root would be "rows".

You are probably going to need to parse that JSON of yours into a simpler format at first, before feeding it to the JSONReader.

Answer 2

I was looking to do the same thing, but have one of the nested items be a field in my chart. This post kept coming up, so I thought it might be helpful to see what I did to solve the chart issue. The key to solving it is knowing that the label config exists: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.chart.Label. Using that you can override the default render of what you pass in. In this example the field is "key" (Not shown here, but my model is using the default type for 'key' (ie., not string)). The key object gets passed to renderer. Using function(t), I can now access that object like javascript and pass back the name under the object.

 json
    key : { 
            wholePath : "c:/.../fileName.txt",
            fileName : "fileName.txt",
        }
  code:
    axes: [
    {
        title: 'Values',
        type: 'Numeric',
        position: 'left',
        fields: ['value'],
        minimum: 0,
        maximum: 100,
        minorTickSteps: 1
    },
    {
        title: 'File Name',
        type: 'Category',
        position: 'bottom',
        fields: ['key'],
        label: {
            renderer: function(t) {
               var fileName = t.name;
               return fileName;
            }
        }
    }