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