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
| Ext.Loader.setConfig({
| enabled: true
| });Ext.Loader.setPath('Ext.ux', '../ux');
|
| Ext.require([
| 'Ext.data.*',
| 'Ext.grid.*',
| 'Ext.tree.*',
| 'Ext.ux.CheckColumn'
| ]);
|
| Ext.onReady(function() {
| Ext.QuickTips.init();
|
| //we want to setup a model and store instead of using dataUrl
| Ext.define('Task', {
| extend: 'Ext.data.Model',
| fields: [
| {name: 'task', type: 'string'},
| {name: 'user', type: 'string'},
| {name: 'duration', type: 'string'},
| {name: 'done', type: 'boolean'}
| ]
| });
|
| var store = Ext.create('Ext.data.TreeStore', {
| model: 'Task',
| proxy: {
| type: 'ajax',
| //the store will get the content from the .json file
| url: 'treegrid.json'
| },
| folderSort: true
| });
|
| //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
| var tree = Ext.create('Ext.tree.Panel', {
| title: 'Core Team Projects',
| width: 500,
| height: 300,
| renderTo: Ext.getBody(),
| collapsible: true,
| useArrows: true,
| rootVisible: false,
| store: store,
| multiSelect: true,
| columns: [{
| xtype: 'treecolumn', //this is so we know which column will show the tree
| text: 'Task',
| width: 200,
| sortable: true,
| dataIndex: 'task',
| locked: true
| }, {
| //we must use the templateheader component so we can use a custom tpl
| xtype: 'templatecolumn',
| text: 'Duration',
| width: 150,
| 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',
| width: 150,
| dataIndex: 'user',
| sortable: true
| }, {
| xtype: 'checkcolumn',
| header: 'Done',
| dataIndex: 'done',
| width: 40,
| stopSelection: false
| }, {
| text: 'Edit',
| width: 40,
| menuDisabled: true,
| xtype: 'actioncolumn',
| tooltip: 'Edit task',
| align: 'center',
| icon: '../simple-tasks/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;
| }
| }]
| });
| });
|
|
