add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / classic / grid / grid-plugins.js

Ext.Loader.setConfig({\r
    enabled: true\r
});\r
\r
Ext.require([\r
    'Ext.grid.*',\r
    'Ext.data.*',\r
    'Ext.selection.CheckboxModel'\r
]);\r
\r
Ext.onReady(function(){\r
    Ext.define('Company', {\r
        extend: 'Ext.data.Model',\r
        fields: [\r
            {name: 'company'},\r
            {name: 'price', type: 'float'},\r
            {name: 'change', type: 'float'},\r
            {name: 'pctChange', type: 'float'},\r
            {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},\r
            {name: 'industry'},\r
            {name: 'desc'}\r
         ]\r
    });\r
    // Array data for the grids\r
    Ext.grid.dummyData = [\r
        ['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],\r
        ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],\r
        ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],\r
        ['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],\r
        ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', 'Services'],\r
        ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am', 'Services'],\r
        ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing'],\r
        ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am', 'Services'],\r
        ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am', 'Finance'],\r
        ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am', 'Manufacturing'],\r
        ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am', 'Manufacturing'],\r
        ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am', 'Manufacturing'],\r
        ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am', 'Automotive'],\r
        ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am', 'Computer'],\r
        ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am', 'Manufacturing'],\r
        ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am', 'Computer'],\r
        ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am', 'Computer'],\r
        ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am', 'Medical'],\r
        ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am', 'Finance'],\r
        ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am', 'Food'],\r
        ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am', 'Medical'],\r
        ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am', 'Computer'],\r
        ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am', 'Medical'],\r
        ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am', 'Food'],\r
        ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am', 'Retail'],\r
        ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing'],\r
        ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', 'Computer'],\r
        ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', 'Services'],\r
        ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am', 'Retail'],\r
        ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']\r
    ];\r
\r
    // add in some dummy descriptions\r
    for(var i = 0; i < Ext.grid.dummyData.length; i++){\r
        Ext.grid.dummyData[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. ');\r
    }\r
\r
\r
    //Ext.QuickTips.init();\r
\r
    var getLocalStore = function() {\r
        return Ext.create('Ext.data.ArrayStore', {\r
            model: 'Company',\r
            data: Ext.grid.dummyData\r
        });\r
    };\r
\r
\r
    ////////////////////////////////////////////////////////////////////////////////////////\r
    // Grid 1\r
    ////////////////////////////////////////////////////////////////////////////////////////\r
    // row expander\r
\r
    var grid1 = Ext.create('Ext.grid.Panel', {\r
        store: getLocalStore(),\r
        columns: [\r
            {text: "Company", flex: 1, dataIndex: 'company'},\r
            {text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},\r
            {text: "Change", dataIndex: 'change'},\r
            {text: "% Change", dataIndex: 'pctChange'},\r
            {text: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}\r
        ],\r
        columnLines: true,\r
        enableLocking: true,\r
        width: 600,\r
        height: 300,\r
        plugins: [{\r
            ptype: 'rowexpander',\r
            rowBodyTpl : new Ext.XTemplate(\r
                '<p><b>Company:</b> {company}</p>',\r
                '<p><b>Change:</b> {change:this.formatChange}</p><br>',\r
                '<p><b>Summary:</b> {desc}</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
        collapsible: true,\r
        animCollapse: false,\r
        title: 'Expander Rows in a Collapsible Grid with lockable columns',\r
        iconCls: 'icon-grid',\r
        margin: '0 0 20 0',\r
        renderTo: Ext.getBody()\r
    });\r
\r
    ////////////////////////////////////////////////////////////////////////////////////////\r
    // Grid 2\r
    ////////////////////////////////////////////////////////////////////////////////////////\r
    var grid2 = Ext.create('Ext.grid.Panel', {\r
        id: 'grid2',\r
        store: getLocalStore(),\r
        selType: 'checkboxmodel',\r
        columns: [\r
            {text: "Company", width: 200, dataIndex: 'company'},\r
            {text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},\r
            {text: "Change", dataIndex: 'change'},\r
            {text: "% Change", dataIndex: 'pctChange'},\r
            {text: "Last Updated", width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}\r
        ],\r
        columnLines: true,\r
        width: 600,\r
        height: 300,\r
        frame: true,\r
        title: 'Framed with Checkbox Selection and Horizontal Scrolling',\r
        iconCls: 'icon-grid',\r
        margin: '0 0 20 0',\r
        renderTo: Ext.getBody()\r
    });\r
\r
    ////////////////////////////////////////////////////////////////////////////////////////\r
    // Grid 3\r
    ////////////////////////////////////////////////////////////////////////////////////////\r
    var grid3 = Ext.create('Ext.grid.Panel', {\r
        store: getLocalStore(),\r
        columns: [\r
            Ext.create('Ext.grid.RowNumberer'),\r
            {text: "Company", flex: 1, sortable: true, dataIndex: 'company'},\r
            {text: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},\r
            {text: "Change", width: 120, sortable: true, dataIndex: 'change'},\r
            {text: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},\r
            {text: "Last Updated", width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}\r
        ],\r
        columnLines: true,\r
        width:600,\r
        height:300,\r
        title:'Grid with Numbered Rows',\r
        iconCls:'icon-grid',\r
        margin: '0 0 20 0',\r
        renderTo: Ext.getBody()\r
    });\r
\r
    ////////////////////////////////////////////////////////////////////////////////////////\r
    // Grid 4\r
    ////////////////////////////////////////////////////////////////////////////////////////\r
    var selModel = Ext.create('Ext.selection.CheckboxModel', {\r
        listeners: {\r
            selectionchange: function(sm, selections) {\r
                grid4.down('#removeButton').setDisabled(selections.length === 0);\r
            }\r
        }\r
    });\r
\r
    var grid4 = Ext.create('Ext.grid.Panel', {\r
        id:'button-grid',\r
        store: getLocalStore(),\r
        columns: [\r
            {text: "Company", flex: 1, sortable: true, dataIndex: 'company'},\r
            {text: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},\r
            {text: "Change", width: 120, sortable: true, dataIndex: 'change'},\r
            {text: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},\r
            {text: "Last Updated", width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}\r
        ],\r
        columnLines: true,\r
        selModel: selModel,\r
\r
        // inline buttons\r
        dockedItems: [{\r
            xtype: 'toolbar',\r
            dock: 'bottom',\r
            ui: 'footer',\r
            layout: {\r
                pack: 'center'\r
            },\r
            items: [{\r
                minWidth: 80,\r
                text: 'Save'\r
            },{\r
                minWidth: 80,\r
                text: 'Cancel'\r
            }]\r
        }, {\r
            xtype: 'toolbar',\r
            items: [{\r
                text:'Add Something',\r
                tooltip:'Add a new row',\r
                iconCls:'add'\r
            }, '-', {\r
                text:'Options',\r
                tooltip:'Set options',\r
                iconCls:'option'\r
            },'-',{\r
                itemId: 'removeButton',\r
                text:'Remove Something',\r
                tooltip:'Remove the selected item',\r
                iconCls:'remove',\r
                disabled: true\r
            }]\r
        }],\r
\r
        width: 600,\r
        height: 300,\r
        frame: true,\r
        title: 'Support for standard Panel features such as framing, buttons and toolbars',\r
        iconCls: 'icon-grid',\r
        renderTo: Ext.getBody()\r
    });\r
});\r