add extjs 6.0.1 sources

[extjs.git] / extjs / examples / kitchensink / classic / samples / view / layout / Accordion.js

/**\r
 * Demonstrates usage of an accordion layout.\r
 */\r
Ext.define('KitchenSink.view.layout.Accordion', {\r
    extend: 'Ext.panel.Panel',\r
    \r
    requires: [\r
        'Ext.layout.container.Accordion',\r
        'Ext.grid.*',\r
        'KitchenSink.model.Company'\r
    ],\r
    xtype: 'layout-accordion',\r
    //<example>\r
    exampleTitle: 'Accordion Layout',\r
    otherContent: [{\r
        type: 'Store',\r
        path: 'classic/samples/data/DataSets.js'\r
    },{\r
        type: 'Model',\r
        path: 'classic/samples/model/Company.js'\r
    }],\r
    profiles: {\r
        classic: {\r
            colWidth: 75\r
        },\r
        \r
        neptune: {\r
            colWidth: 90\r
        }\r
    },\r
    //</example>\r
    layout: 'accordion',\r
    width: 500,\r
    height: 400,\r
    defaults: {\r
        bodyPadding: 10\r
    },\r
    \r
    initComponent: function() {\r
        Ext.apply(this, {\r
            items: [{\r
                bodyPadding: 0,\r
                xtype: 'grid',\r
                title: 'Array Grid (Click or tap header to collapse)',\r
                hideCollapseTool: true,\r
                columnLines: true,\r
                store: new Ext.data.Store({\r
                    model: KitchenSink.model.Company,\r
                    data: KitchenSink.data.DataSets.company\r
                }),\r
                columns: [{\r
                    text     : 'Company',\r
                    flex     : 1,\r
                    sortable : false,\r
                    dataIndex: 'name'\r
                }, {\r
                    text     : 'Price',\r
                    width    : 75,\r
                    sortable : true,\r
                    formatter: 'usMoney',\r
                    dataIndex: 'price'\r
                }, {\r
                    text     : 'Change',\r
                    width    : 75,\r
                    sortable : true,\r
                    renderer : this.changeRenderer,\r
                    dataIndex: 'change'\r
                }, {\r
                    text     : '% Change',\r
                    width    : 90,\r
                    sortable : true,\r
                    renderer : this.pctChangeRenderer,\r
                    dataIndex: 'pctChange'\r
                }]\r
            }, {\r
                title: 'Accordion Item 2',\r
                html: 'Empty'\r
            }, {\r
                title: 'Accordion Item 3',\r
                html: 'Empty'\r
            }, {\r
                title: 'Accordion Item 4',\r
                html: 'Empty'\r
            }, {\r
                title: 'Accordion Item 5',\r
                html: 'Empty'\r
            }]\r
        });\r
        this.callParent();\r
    },\r
    \r
    changeRenderer: function(val) {\r
        if (val > 0) {\r
            return '<span style="color:green;">' + val + '</span>';\r
        } else if(val < 0) {\r
            return '<span style="color:red;">' + val + '</span>';\r
        }\r
        return val;\r
    },\r
    \r
    pctChangeRenderer: function(val){\r
        if (val > 0) {\r
            return '<span style="color:green;">' + val + '%</span>';\r
        } else if(val < 0) {\r
            return '<span style="color:red;">' + val + '%</span>';\r
        }\r
        return val;\r
    }\r
});\r