add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / classic / grid / locking-grp-summary-grp-hdrs-grid.js

Ext.Loader.setConfig({\r
    enabled: true\r
});\r
\r
Ext.require([\r
    'Ext.grid.*',\r
    'Ext.layout.container.Border',\r
    'Ext.data.*',\r
    'Ext.form.field.Number',\r
    'Ext.form.field.Date',\r
    'Ext.tip.QuickTipManager',\r
    'Ext.ux.DataTip'\r
]);\r
\r
Ext.define('Task', {\r
    extend: 'Ext.data.Model',\r
    idProperty: 'taskId',\r
    fields: [\r
        {name: 'projectId', type: 'int'},\r
        {name: 'project', type: 'string'},\r
        {name: 'taskId', type: 'int'},\r
        {name: 'description', type: 'string'},\r
        {name: 'estimate', type: 'float'},\r
        {name: 'rate', type: 'float'},\r
        {name: 'due', type: 'date', dateFormat:'m/d/Y'}\r
    ]\r
});\r
\r
var data = [\r
    {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 112, description: 'Integrate 2.0 Forms with 2.0 Layouts', estimate: 6, rate: 150, due:'06/24/2007'},\r
    {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 113, description: 'Implement AnchorLayout', estimate: 4, rate: 150, due:'06/25/2007'},\r
    {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 114, description: 'Add support for multiple<br>types of anchors', estimate: 4, rate: 150, due:'06/27/2007'},\r
    {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 115, description: 'Testing and debugging', estimate: 8, rate: 0, due:'06/29/2007'},\r
    {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 101, description: 'Add required rendering "hooks" to GridView', estimate: 6, rate: 100, due:'07/01/2007'},\r
    {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 102, description: 'Extend GridView and override rendering functions', estimate: 6, rate: 100, due:'07/03/2007'},\r
    {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 103, description: 'Extend Store with grouping functionality', estimate: 4, rate: 100, due:'07/04/2007'},\r
    {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 121, description: 'Default CSS Styling', estimate: 2, rate: 100, due:'07/05/2007'},\r
    {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 104, description: 'Testing and debugging', estimate: 6, rate: 100, due:'07/06/2007'},\r
    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 105, description: 'Ext Grid plugin integration', estimate: 4, rate: 125, due:'07/01/2007'},\r
    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 106, description: 'Summary creation during rendering phase', estimate: 4, rate: 125, due:'07/02/2007'},\r
    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 107, description: 'Dynamic summary updates in editor grids', estimate: 6, rate: 125, due:'07/05/2007'},\r
    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 108, description: 'Remote summary integration', estimate: 4, rate: 125, due:'07/05/2007'},\r
    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 109, description: 'Summary renderers and calculators', estimate: 4, rate: 125, due:'07/06/2007'},\r
    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 110, description: 'Integrate summaries with GroupingView', estimate: 10, rate: 125, due:'07/11/2007'},\r
    {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 111, description: 'Testing and debugging', estimate: 8, rate: 125, due:'07/15/2007'}\r
];\r
\r
Ext.onReady(function(){\r
    \r
    Ext.tip.QuickTipManager.init();\r
    \r
    var store = Ext.create('Ext.data.Store', {\r
        model: 'Task',\r
        data: data,\r
        sorters: {property: 'due', direction: 'ASC'},\r
        groupField: 'project'\r
    });\r
\r
    var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {\r
        clicksToEdit: 1\r
    });\r
\r
    var grid = Ext.create('Ext.grid.Panel', {\r
        width: 800,\r
        height: 450,\r
        frame: true,\r
        title: 'Sponsored Projects',\r
        iconCls: 'icon-grid',\r
        renderTo: document.body,\r
        columnLines : true,\r
        store: store,\r
        layout: 'border',\r
        plugins: [\r
            cellEditing,\r
            {\r
                ptype: 'datatip',\r
                tpl: 'Click to edit {description}'\r
            }\r
        ],\r
        listeners: {\r
            beforeshowtip: function(grid, tip, data) {\r
                var cellNode = tip.triggerEvent.getTarget(tip.view.getCellSelector());\r
                if (cellNode) {\r
                    data.colName = tip.view.headerCt.columnManager.getHeaderAtIndex(cellNode.cellIndex).text;\r
                }\r
            }\r
        },\r
        selModel: {\r
            selType: 'cellmodel'\r
        },\r
        dockedItems: [{\r
            dock: 'top',\r
            xtype: 'toolbar',\r
            items: [{\r
                tooltip: 'Toggle the visibility of the summary row',\r
                text: 'Toggle Summary',\r
                enableToggle: true,\r
                pressed: true,\r
                handler: function() {\r
                    grid.lockedGrid.getView().getFeature('group').toggleSummaryRow();\r
                }\r
            }]\r
        }],\r
        features: [{\r
            id: 'group',\r
            ftype: 'groupingsummary',\r
            groupHeaderTpl: '{name}',\r
            hideGroupedHeader: true,\r
            enableGroupingMenu: true\r
        }, {\r
            ftype: 'summary',\r
            dock: 'bottom'\r
        }],\r
        split: true,\r
        lockedGridConfig: {\r
            header: false,\r
            collapsible: true,\r
            width: 300,\r
            forceFit: true\r
        },\r
        lockedViewConfig: {\r
            scroll: 'horizontal'\r
        },\r
        columns: [{\r
            text: 'Task',\r
            flex: 1,\r
            locked: true,\r
            tdCls: 'task',\r
            sortable: true,\r
            dataIndex: 'description',\r
\r
            // This may have wrapped HTML which causes unpredictable row heights\r
            variableRowHeight: true,\r
            hideable: false,\r
            summaryType: 'count',\r
            summaryRenderer: function(value, summaryData, dataIndex) {\r
                return ((value === 0 || value > 1) ? '(' + value + ' Tasks)' : '(1 Task)');\r
            },\r
            field: {\r
                xtype: 'textfield'\r
            }\r
        }, {\r
            header: 'Project',\r
            width: 180,\r
            sortable: true,\r
            dataIndex: 'project'\r
        }, {\r
            header: 'Schedule',\r
            columns: [{\r
                header: 'Due Date',\r
                width: 125,\r
                sortable: true,\r
                dataIndex: 'due',\r
                summaryType: 'max',\r
                renderer: Ext.util.Format.dateRenderer('m/d/Y'),\r
                summaryRenderer: Ext.util.Format.dateRenderer('m/d/Y'),\r
                field: {\r
                    xtype: 'datefield'\r
                }\r
            }, {\r
                header: 'Estimate',\r
                width: 125,\r
                sortable: true,\r
                dataIndex: 'estimate',\r
                summaryType: 'sum',\r
                renderer: function(value, metaData, record, rowIdx, colIdx, store, view){\r
                    return value + ' hours';\r
                },\r
                summaryRenderer: function(value, summaryData, dataIndex) {\r
                    return value + ' hours';\r
                },\r
                field: {\r
                    xtype: 'numberfield'\r
                }\r
            }, {\r
                header: 'Rate',\r
                width: 125,\r
                sortable: true,\r
                renderer: Ext.util.Format.usMoney,\r
                summaryRenderer: Ext.util.Format.usMoney,\r
                dataIndex: 'rate',\r
                summaryType: 'average',\r
                field: {\r
                    xtype: 'numberfield'\r
                }\r
            }, {\r
                header: 'Cost',\r
                width: 114,\r
                sortable: false,\r
                groupable: false,\r
                renderer: function(value, metaData, record, rowIdx, colIdx, store, view) {\r
                    return Ext.util.Format.usMoney(record.get('estimate') * record.get('rate'));\r
                },\r
                summaryType: function(records, values) {\r
                    var i = 0,\r
                        length = records.length,\r
                        total = 0,\r
                        record;\r
\r
                    for (; i < length; ++i) {\r
                        record = records[i];\r
                        total += record.get('estimate') * record.get('rate');\r
                    }\r
                    return total;\r
                },\r
                summaryRenderer: Ext.util.Format.usMoney\r
            }]\r
        }]\r
    });\r
});\r