add extjs 6.0.1 sources

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

/**\r
 * This is an example of using the Ext JS grid to show very large datasets\r
 * without overloading the DOM. It also uses locking columns, and incorporates the\r
 * GroupSummary feature. Filtering is enabled on certain columns using the FilterFeature.\r
 *\r
 * As an illustration of the ability of grid columns to act as containers, the Title\r
 * column has a filter text field built in which filters as you type.\r
 *\r
 * The grid is editable using the RowEditing plugin.\r
 *\r
 * The `multiColumnSort` config is used to allow multiple columns to have sorters.\r
 *\r
 * It is also possible to export the grid data to Excel. This feature is available in Ext JS Premium.\r
 */\r
Ext.define('KitchenSink.view.grid.BigData', {\r
    extend: 'Ext.grid.Panel',\r
    requires: [\r
        'Ext.grid.filters.Filters',\r
        'Ext.grid.plugin.Exporter'\r
    ],\r
    xtype: 'big-data-grid',\r
    store: 'BigData',\r
    columnLines: true,\r
    height: 400,\r
    width: 910,\r
    title: 'Editable Big Data Grid',\r
    multiColumnSort: true,\r
\r
    // We do not need automatic height synching.\r
    // The Grouping plugin renders the same DOM into each side to keep heights the same,\r
    // The normal side is visibility:hidden.\r
    // And the RowExpander handles this itself when a row is expanded, or when an expanded\r
    // row is scrolled back into the rendered block.\r
    syncRowHeight: false,\r
\r
    //<example>\r
    exampleTitle: 'Editable Big Data Grid',\r
    otherContent: [{\r
        type: 'Controller',\r
        path: 'classic/samples/view/grid/BigDataController.js'\r
    },{\r
        type: 'Store',\r
        path: 'classic/samples/store/BigData.js'\r
    },{\r
        type: 'Model',\r
        path: 'classic/samples/model/grid/Employee.js'\r
    }],\r
    exampleDescription: [\r
        '<p>This example uses locking columns, and incorporates the GroupSummary feature.</p>' +\r
        '<p>Filtering is enabled on certain columns using the FilterFeature UX.</p>' +\r
        '<p>As an illustration of the ability of grid columns to act as containers, the ' +\r
        'Title column has a filter text field built in which filters as you type.</p>' +\r
        '<p>The grid is editable using the RowEditing plugin.</p>',\r
        '<p>The <code>multiColumnSort</code> config is used to allow multiple columns to have sorters.</p>' +\r
        '<p>The full name column uses a custom sorter which sorts on the surname.</p>'\r
    ].join(''),\r
    //</example>\r
    controller: 'bigdata',\r
\r
    features: [{\r
        ftype : 'groupingsummary',\r
        groupHeaderTpl : '{name}',\r
        hideGroupedHeader : false,\r
        enableGroupingMenu : false\r
    }, {\r
        ftype: 'summary',\r
        dock: 'bottom'\r
    }],\r
\r
    selModel: {\r
        type: 'checkboxmodel',\r
        checkOnly: true\r
    },\r
    \r
    listeners: {\r
        headermenucreate: 'onHeaderMenuCreate'\r
    },\r
\r
    columns:[{\r
        xtype: 'rownumberer',\r
        width: 40,\r
        sortable: false,\r
        locked: true\r
    }, {\r
        text: 'Id',\r
        sortable: true,\r
        dataIndex: 'employeeNo',\r
        groupable: false,\r
        width: 80,\r
        locked: true,\r
        editRenderer: 'bold'\r
    }, {\r
        text: 'Name (Filter)',\r
        sortable: true,\r
        dataIndex: 'name',\r
        groupable: false,\r
        width: 140,\r
        layout: 'hbox',\r
        locked: true,\r
        renderer: 'concatNames',\r
        editor: {\r
            xtype: 'textfield'\r
        },\r
        // Sort prioritizing surname over forename as would be expected.\r
        sorter: function(rec1, rec2) {\r
            var rec1Name = rec1.get('surname') + rec1.get('forename'),\r
                rec2Name = rec2.get('surname') + rec2.get('forename');\r
\r
            if (rec1Name > rec2Name) {\r
                return 1;\r
            }\r
            if (rec1Name < rec2Name) {\r
                return -1;\r
            }\r
            return 0;\r
        },\r
        items    : {\r
            xtype: 'textfield',\r
            reference: 'nameFilterField',  // So that the Controller can access it easily\r
            flex : 1,\r
            margin: 2,\r
            enableKeyEvents: true,\r
            listeners: {\r
                keyup: 'onNameFilterKeyup',\r
                buffer: 500\r
            }\r
        }\r
    }, {\r
        text: 'Rating',\r
        width: 100,\r
        sortable: true,\r
        dataIndex: 'rating',\r
        groupable: false,\r
        xtype: 'widgetcolumn',\r
        widget: {\r
            xtype: 'sparklineline'\r
        }\r
    }, {\r
        text: 'Date of birth',\r
        dataIndex: 'dob',\r
        xtype: 'datecolumn',\r
        groupable: false,\r
        width: 115,\r
        filter: {\r
\r
        },\r
        editor: {\r
            xtype: 'datefield'\r
        }\r
    }, {\r
        text: 'Join date',\r
        dataIndex: 'joinDate',\r
        xtype: 'datecolumn',\r
        groupable: false,\r
        width: 120,\r
        filter: {\r
\r
        },\r
        editor: {\r
            xtype: 'datefield'\r
        }\r
    }, {\r
        text: 'Notice<br>period',\r
        dataIndex: 'noticePeriod',\r
        groupable: false,\r
        width: 115,\r
        filter: {\r
            type: 'list'\r
        },\r
        editor: {\r
            xtype: 'combobox',\r
            initComponent: function() {\r
                this.store = this.column.up('tablepanel').store.collect(this.column.dataIndex, false, true);\r
                Ext.form.field.ComboBox.prototype.initComponent.apply(this, arguments);\r
            }\r
        }\r
    }, {\r
        text: 'Email address',\r
        dataIndex: 'email',\r
        width: 200,\r
        groupable: false,\r
        renderer: function(v) {\r
            return '<a href="mailto:' + v + '">' + v + '</a>';\r
        },\r
        editor: {\r
            xtype: 'textfield'\r
        },\r
        filter: {\r
\r
        }\r
    }, {\r
        text: 'Department',\r
        dataIndex: 'department',\r
        hidden: true,\r
        hideable: false,\r
        filter: {\r
            type: 'list'\r
        }\r
    }, {\r
        text: 'Absences',\r
        columns: [{\r
            text: 'Illness',\r
            dataIndex: 'sickDays',\r
            width: 100,\r
            groupable: false,\r
            summaryType: 'sum',\r
            summaryFormatter: 'number("0")',\r
            filter: {\r
\r
            },\r
            editor: {\r
                xtype: 'numberfield',\r
                decimalPrecision: 0\r
            }\r
        }, {\r
            text: 'Holidays',\r
            dataIndex: 'holidayDays',\r
            // Size column to title text\r
            width: null,\r
            groupable: false,\r
            summaryType: 'sum',\r
            summaryFormatter: 'number("0")',\r
            filter: {\r
\r
            },\r
            editor: {\r
                xtype: 'numberfield',\r
                decimalPrecision: 0\r
            }\r
        }, {\r
            text: 'Holiday Allowance',\r
            dataIndex: 'holidayAllowance',\r
            // Size column to title text\r
            width: null,\r
            groupable: false,\r
            filter: {\r
\r
            },\r
            editor: {\r
                xtype: 'numberfield',\r
                decimalPrecision: 0\r
            }\r
        }]\r
    }, {\r
        text: 'Salary',\r
        width: 155,\r
        sortable: true,\r
        dataIndex: 'salary',\r
        align: 'right',\r
        formatter: 'usMoney',\r
        groupable: false,\r
        summaryType: 'average',\r
        summaryFormatter: 'usMoney',\r
        filter: {\r
\r
        },\r
        editor: {\r
            xtype: 'numberfield',\r
            decimalPrecision: 2\r
        }\r
    }],\r
\r
    viewConfig: {\r
        stripeRows: true\r
    },\r
    \r
    header: {\r
        itemPosition: 1, // after title before collapse tool\r
        items: [{\r
            ui: 'default-toolbar',\r
            xtype: 'button',\r
            text: 'Export to Excel',\r
            handler: 'exportToExcel'\r
        }]\r
    },\r
\r
    plugins: [{\r
        ptype: 'gridfilters'\r
    }, {\r
        ptype: 'rowexpander',\r
\r
        // dblclick invokes the row editor\r
        expandOnDblClick: false,\r
        rowBodyTpl: '<img src="{avatar}" height="100px" style="float:left;margin:0 10px 5px 0"><b>{name}<br></b>{dob:date}'\r
    },{\r
        ptype: 'gridexporter'\r
    }]\r
});\r