UAS2.0_DEV_TEST/app/view/grid/expander/Panel.js

/**
 * This is an example of using the grid with a RowExpander plugin that adds the ability
 * to have a column in a grid which enables a second row body which expands/contracts.
 *
 * The expand/contract behavior is configurable to react on clicking of the column, double
 * click of the row, and/or hitting enter while a row is selected.
 */
Ext.define('uas.view.grid.expander.Panel', {
    extend: 'Ext.grid.Panel',

    xtype: 'grid-expander-panel',

    requires: [
        'uas.data.Company',
        'uas.model.Company',
        'uas.store.Companies'
    ],

    bind: '{companies}',
    viewModel: {
        stores: {
            companies: {
                type: 'companies',
                autoLoad: true,
            }
        }
    },
    profiles: {
        classic: {
            width: 600,
            pricechangeWidth: 100,
            percentChangeColumnWidth: 100,
            lastUpdatedColumnWidth: 100
        },
        neptune: {
            width: 600,
            pricechangeWidth: 100,
            percentChangeColumnWidth: 100,
            lastUpdatedColumnWidth: 100
        },
        graphite: {
            width: 750,
            pricechangeWidth: 110,
            percentChangeColumnWidth: 120,
            lastUpdatedColumnWidth: 150          
        }
    },
    columns: [
        { text: "Company", flex: 1, dataIndex: 'name'},
        { text: "Price", formatter: 'usMoney', dataIndex: 'price', width: 100},
        { text: "Change", dataIndex: 'priceChange', width: 100},
        { text: "% Change", dataIndex: 'priceChangePct', width: 100},
        { text: "Last Updated", formatter: 'date("m/d/Y")', dataIndex: 'priceLastChange', width: 100}
    ],

    plugins: {
        rowexpander: {
            rowBodyTpl: new Ext.XTemplate(
                '<p><b>Company:</b> {name}</p>',
                '<p><b>Change:</b> {change:this.formatChange}</p>',
                {
                    formatChange: function (v) {
                        var color = v >= 0 ? 'green' : 'red';
                        return '<span style="color: ' + color + ';">' +
                            Ext.util.Format.usMoney(v) + '</span>';
                    }
                })
        }
    }
});