]>
Commit | Line | Data |
---|---|---|
6527f429 DM |
1 | /**\r |
2 | * This example is an advanced tree example. It illustrates:\r | |
3 | *\r | |
4 | * - Multiple headers\r | |
5 | * - Preloading of nodes with a single AJAX request\r | |
6 | * - Header hiding, showing, reordering and resizing\r | |
7 | * - useArrows configuration\r | |
8 | * - Keyboard Navigation\r | |
9 | * - Discontiguous selection by holding the CTRL key\r | |
10 | * - Using custom iconCls\r | |
11 | * - singleExpand has been set to true\r | |
12 | */\r | |
13 | Ext.define('KitchenSink.view.tree.TreeGrid', {\r | |
14 | extend: 'Ext.tree.Panel',\r | |
15 | \r | |
16 | requires: [\r | |
17 | 'Ext.data.*',\r | |
18 | 'Ext.grid.*',\r | |
19 | 'Ext.tree.*',\r | |
20 | 'Ext.ux.CheckColumn',\r | |
21 | 'KitchenSink.model.tree.Task'\r | |
22 | ], \r | |
23 | xtype: 'tree-grid',\r | |
24 | \r | |
25 | reserveScrollbar: true,\r | |
26 | //<example>\r | |
27 | exampleTitle: 'TreeGrid',\r | |
28 | otherContent: [{\r | |
29 | type: 'Model',\r | |
30 | path: 'classic/samples/model/tree/Task.js'\r | |
31 | },{\r | |
32 | type: 'Data',\r | |
33 | path: 'data/tree/treegrid.json'\r | |
34 | }],\r | |
35 | profiles: {\r | |
36 | classic: {\r | |
37 | width: 500,\r | |
38 | colWidth: 40\r | |
39 | },\r | |
40 | neptune: {\r | |
41 | width: 600,\r | |
42 | colWidth: 55\r | |
43 | }\r | |
44 | },\r | |
45 | //</example>\r | |
46 | \r | |
47 | title: 'Core Team Projects',\r | |
48 | height: 370,\r | |
49 | useArrows: true,\r | |
50 | rootVisible: false,\r | |
51 | multiSelect: true,\r | |
52 | singleExpand: true,\r | |
53 | \r | |
54 | initComponent: function() {\r | |
55 | this.width = this.profileInfo.width;\r | |
56 | \r | |
57 | Ext.apply(this, {\r | |
58 | store: new Ext.data.TreeStore({\r | |
59 | model: KitchenSink.model.tree.Task,\r | |
60 | proxy: {\r | |
61 | type: 'ajax',\r | |
62 | url: 'data/tree/treegrid.json'\r | |
63 | },\r | |
64 | folderSort: true\r | |
65 | }),\r | |
66 | columns: [{\r | |
67 | xtype: 'treecolumn', //this is so we know which column will show the tree\r | |
68 | text: 'Task',\r | |
69 | flex: 2,\r | |
70 | sortable: true,\r | |
71 | dataIndex: 'task'\r | |
72 | },{\r | |
73 | //we must use the templateheader component so we can use a custom tpl\r | |
74 | xtype: 'templatecolumn',\r | |
75 | text: 'Duration',\r | |
76 | flex: 1,\r | |
77 | sortable: true,\r | |
78 | dataIndex: 'duration',\r | |
79 | align: 'center',\r | |
80 | //add in the custom tpl for the rows\r | |
81 | tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', {\r | |
82 | formatHours: function(v) {\r | |
83 | if (v < 1) {\r | |
84 | return Math.round(v * 60) + ' mins';\r | |
85 | } else if (Math.floor(v) !== v) {\r | |
86 | var min = v - Math.floor(v);\r | |
87 | return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';\r | |
88 | } else {\r | |
89 | return v + ' hour' + (v === 1 ? '' : 's');\r | |
90 | }\r | |
91 | }\r | |
92 | })\r | |
93 | },{\r | |
94 | text: 'Assigned To',\r | |
95 | flex: 1,\r | |
96 | dataIndex: 'user',\r | |
97 | sortable: true\r | |
98 | }, {\r | |
99 | xtype: 'checkcolumn',\r | |
100 | header: 'Done',\r | |
101 | dataIndex: 'done',\r | |
102 | width: this.profileInfo.colWidth,\r | |
103 | stopSelection: false,\r | |
104 | menuDisabled: true\r | |
105 | }, {\r | |
106 | text: 'Edit',\r | |
107 | width: this.profileInfo.colWidth,\r | |
108 | menuDisabled: true,\r | |
109 | xtype: 'actioncolumn',\r | |
110 | tooltip: 'Edit task',\r | |
111 | align: 'center',\r | |
112 | iconCls: 'tree-grid-edit-task',\r | |
113 | handler: function(grid, rowIndex, colIndex, actionItem, event, record, row) {\r | |
114 | Ext.Msg.alert('Editing' + (record.get('done') ? ' completed task' : '') , record.get('task'));\r | |
115 | },\r | |
116 | // Only leaf level tasks may be edited\r | |
117 | isDisabled: function(view, rowIdx, colIdx, item, record) {\r | |
118 | return !record.data.leaf;\r | |
119 | }\r | |
120 | }]\r | |
121 | });\r | |
122 | this.callParent();\r | |
123 | }\r | |
124 | });\r |