add extjs 6.0.1 sources

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

/**\r
 * This example shows how to achieve "freeze pane" locking functionality similar to Excel.\r
 *\r
 * Columns may be locked or unlocked by dragging them across into the opposite side, or\r
 * by using the column's header menu.\r
 *\r
 * The "Price" column is not lockable, and may not be dragged into the locked side, or\r
 * locked using the header menu.\r
 *\r
 * It is not possible to lock all columns using the user interface. The unlocked side must\r
 * always contain at least one column.\r
 *\r
 * There is also an initially hidden "Tall Header" that shows wrapping header text.'\r
 */\r
Ext.define('KitchenSink.view.grid.LockingGrid', {\r
    extend: 'Ext.grid.Panel',\r
    requires: [\r
        'Ext.grid.RowNumberer'\r
    ],\r
    xtype: 'locking-grid',\r
    store: 'Companies',\r
    columnLines: true,\r
    height: 350,\r
    width: 600,\r
    title: 'Locking Grid',\r
\r
    // There is no asymmetric data, we do not need to go to the expense of synching row heights\r
    syncRowHeight: false,\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
    profiles: {\r
        classic: {\r
        },\r
        neptune: {\r
        }\r
    },\r
    //</example>\r
\r
    initComponent: function () {\r
        this.columns = [{\r
                xtype: 'rownumberer'\r
            }, {\r
                text     : 'Company Name',\r
                locked   : true,\r
                width    : 230,\r
                sortable : false,\r
                dataIndex: 'name'\r
            }, {\r
                text     : 'Price',\r
                lockable: false,\r
                width    : 80,\r
                sortable : true,\r
                formatter: 'usMoney',\r
                dataIndex: 'price'\r
            }, {\r
                text     : 'Tall<br>Header',\r
                hidden   : true,\r
                width    : 70,\r
                sortable : false,\r
                renderer : function(val) {\r
                    return Math.round(val * 3.14 * 100) / 10;\r
                },\r
                dataIndex: 'change'\r
            }, {\r
                text     : 'Change',\r
                width    : 90,\r
                sortable : true,\r
                renderer : 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
                dataIndex: 'change'\r
            }, {\r
                text     : '% Change',\r
                width    : 105,\r
                sortable : true,\r
                renderer : 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
                dataIndex: 'pctChange'\r
            }, {\r
                text     : 'Last Updated',\r
                width    : 135,\r
                sortable : true,\r
                formatter: 'date("m/d/Y")',\r
                dataIndex: 'lastChange'\r
            }];\r
\r
        this.callParent();\r
    }\r
});\r