add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / kitchensink / classic / samples / view / tree / TreeGrid.js

/**\r
 * This example is an advanced tree example. It illustrates:\r
 *\r
 * - Multiple headers\r
 * - Preloading of nodes with a single AJAX request\r
 * - Header hiding, showing, reordering and resizing\r
 * - useArrows configuration\r
 * - Keyboard Navigation\r
 * - Discontiguous selection by holding the CTRL key\r
 * - Using custom iconCls\r
 * - singleExpand has been set to true\r
 */\r
Ext.define('KitchenSink.view.tree.TreeGrid', {\r
    extend: 'Ext.tree.Panel',\r
    \r
    requires: [\r
        'Ext.data.*',\r
        'Ext.grid.*',\r
        'Ext.tree.*',\r
        'Ext.ux.CheckColumn',\r
        'KitchenSink.model.tree.Task'\r
    ],    \r
    xtype: 'tree-grid',\r
    \r
    reserveScrollbar: true,\r
    //<example>\r
    exampleTitle: 'TreeGrid',\r
    otherContent: [{\r
        type: 'Model',\r
        path: 'classic/samples/model/tree/Task.js'\r
    },{\r
        type: 'Data',\r
        path: 'data/tree/treegrid.json'\r
    }],\r
    profiles: {\r
        classic: {\r
            width: 500,\r
            colWidth: 40\r
        },\r
        neptune: {\r
            width: 600,\r
            colWidth: 55\r
        }\r
    },\r
    //</example>\r
    \r
    title: 'Core Team Projects',\r
    height: 370,\r
    useArrows: true,\r
    rootVisible: false,\r
    multiSelect: true,\r
    singleExpand: true,\r
    \r
    initComponent: function() {\r
        this.width = this.profileInfo.width;\r
        \r
        Ext.apply(this, {\r
            store: new Ext.data.TreeStore({\r
                model: KitchenSink.model.tree.Task,\r
                proxy: {\r
                    type: 'ajax',\r
                    url: 'data/tree/treegrid.json'\r
                },\r
                folderSort: true\r
            }),\r
            columns: [{\r
                xtype: 'treecolumn', //this is so we know which column will show the tree\r
                text: 'Task',\r
                flex: 2,\r
                sortable: true,\r
                dataIndex: 'task'\r
            },{\r
                //we must use the templateheader component so we can use a custom tpl\r
                xtype: 'templatecolumn',\r
                text: 'Duration',\r
                flex: 1,\r
                sortable: true,\r
                dataIndex: 'duration',\r
                align: 'center',\r
                //add in the custom tpl for the rows\r
                tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', {\r
                    formatHours: function(v) {\r
                        if (v < 1) {\r
                            return Math.round(v * 60) + ' mins';\r
                        } else if (Math.floor(v) !== v) {\r
                            var min = v - Math.floor(v);\r
                            return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';\r
                        } else {\r
                            return v + ' hour' + (v === 1 ? '' : 's');\r
                        }\r
                    }\r
                })\r
            },{\r
                text: 'Assigned To',\r
                flex: 1,\r
                dataIndex: 'user',\r
                sortable: true\r
            }, {\r
                xtype: 'checkcolumn',\r
                header: 'Done',\r
                dataIndex: 'done',\r
                width: this.profileInfo.colWidth,\r
                stopSelection: false,\r
                menuDisabled: true\r
            }, {\r
                text: 'Edit',\r
                width: this.profileInfo.colWidth,\r
                menuDisabled: true,\r
                xtype: 'actioncolumn',\r
                tooltip: 'Edit task',\r
                align: 'center',\r
                iconCls: 'tree-grid-edit-task',\r
                handler: function(grid, rowIndex, colIndex, actionItem, event, record, row) {\r
                    Ext.Msg.alert('Editing' + (record.get('done') ? ' completed task' : '') , record.get('task'));\r
                },\r
                // Only leaf level tasks may be edited\r
                isDisabled: function(view, rowIdx, colIdx, item, record) {\r
                    return !record.data.leaf;\r
                }\r
            }]\r
        });\r
        this.callParent();\r
    }\r
});\r