How to select nested nodes from XML data to display in grid?

[sdaly]

I am trying to select a nested node from xml data to display the node value in a grid. The node I am after is the highestPrice/Price node. I can reference the price node, but that only gives me the first instance. I know that the way HighestPrice/Price is referenced in the model and the grid is not correct. Also, I do not want to change the data structure on the server. Any help with this would be greatly appreciated.

myPlants.xml:

<catalog>
  <plant>
    <common>Bloodroot</common>
    <botanical>Sanguinaria canadensis</botanical>
    <zone>4</zone>
    <light>Mostly Shady</light>
    <lowestPrice>
        <price>2.44</price>
    </lowestPrice>
    <highestPrice>
        <price>3.44</price>
    </highestPrice>
    <availability>03/15/2006</availability>
    <indoor>true</indoor>
  </plant>
  <plant>
    <common>Columbine</common>
    <botanical>Aquilegia canadensis</botanical>
    <zone>3</zone>
    <light>Mostly Shady</light>
    <lowestPrice>
        <price>9.37</price>
    </lowestPrice>
    <highestPrice>
        <price>10.37</price>
    </highestPrice>
    <availability>03/06/2006</availability>
    <indoor>true</indoor>
  </plant>
</catalog>

PlantStore:

Ext.define('PlantStore', {
    extend: 'Ext.data.Store',
    model: 'PlantModel',
    proxy: {
        type: 'ajax',
        url: 'myPlants.xml',
        reader: {
            type: 'xml',
            record: 'plant'
        }
    }
});

PlantModel:

Ext.define('PlantModel', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'common', type: 'string'},
        {name: 'botanical', type: 'string'},
        {name: 'light'},
        {name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
        {name: 'indoor', type: 'bool'},
        {name: 'highestPrice/Price', type: 'float'},   <--  How to do this?
    ]
});

PlantGrid:

Ext.define('PlantGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.PlantGrid',
    initComponent: function() {
        Ext.apply(this, {
            store: 'PlantStore',
            columns: [
{id: 'common',header: 'Common Name',dataIndex: 'common',flex: 1 }, 
{header: 'Light',dataIndex: 'light',width: 130,},
 {header: 'Highest Price', dataIndex: 'highestPrice/price', width: 130,}  <-- How to do this?
   ],
        });
        this.callParent(arguments);
    },
});

[mitchellsimoens]

Use the mapping config on the field...

mapping : 'highestPrice price'

[sdaly]

I knew there had to be an easy way to do this. Ext and Sencha rock!! Thank you for your help!!