add extjs 6.0.1 sources

[extjs.git] / extjs / examples / kitchensink / classic / samples / view / grid / RowExpander.js

/**\r
 * This is an example of using the grid with a RowExpander plugin that adds the ability\r
 * to have a column in a grid which enables a second row body which expands/contracts.\r
 *\r
 * The expand/contract behavior is configurable to react on clicking of the column, double\r
 * click of the row, and/or hitting enter while a row is selected.\r
 */\r
Ext.define('KitchenSink.view.grid.RowExpander', {\r
    extend: 'Ext.grid.Panel',\r
\r
    xtype: 'row-expander-grid',\r
    store: 'Companies',\r
\r
    columns: [\r
        { text: "Company", flex: 1, dataIndex: 'name'},\r
        { text: "Price", formatter: 'usMoney', dataIndex: 'price'},\r
        { text: "Change", dataIndex: 'change'},\r
        { text: "% Change", dataIndex: 'pctChange'},\r
        { text: "Last Updated", formatter: 'date("m/d/Y")', dataIndex: 'lastChange'}\r
    ],\r
    width: 600,\r
    height: 300,\r
\r
    //<example>\r
    otherContent: [{\r
        type: 'Store',\r
        path: 'classic/samples/store/Companies.js'\r
    },{\r
        type: 'Model',\r
        path: 'classic/samples/model/Company.js'\r
    }],\r
    //</example>\r
\r
    plugins: [{\r
        ptype: 'rowexpander',\r
        rowBodyTpl : new Ext.XTemplate(\r
            '<p><b>Company:</b> {name}</p>',\r
            '<p><b>Change:</b> {change:this.formatChange}</p>',\r
        {\r
            formatChange: function(v){\r
                var color = v >= 0 ? 'green' : 'red';\r
                return '<span style="color: ' + color + ';">' + Ext.util.Format.usMoney(v) + '</span>';\r
            }\r
        })\r
    }],\r
    title: 'Expander Rows to show extra data'\r
});\r