projects / extjs.git / blame
| Commit | Line | Data |
|---|---|---|
| 6527f429 DM |
1 | Ext.require([\r |
| 2 | 'Ext.data.*',\r | |
| 3 | 'Ext.grid.*',\r | |
| 4 | 'Ext.tree.*',\r | |
| 5 | 'Ext.tip.*',\r | |
| 6 | 'Ext.ux.CheckColumn'\r | |
| 7 | ]);\r | |
| 8 | \r | |
| 9 | //we want to setup a model and store instead of using dataUrl\r | |
| 10 | Ext.define('Task', {\r | |
| 11 | extend: 'Ext.data.TreeModel',\r | |
| 12 | fields: [\r | |
| 13 | {name: 'task', type: 'string'},\r | |
| 14 | {name: 'user', type: 'string'},\r | |
| 15 | {name: 'duration', type: 'string'},\r | |
| 16 | {name: 'done', type: 'boolean'}\r | |
| 17 | ]\r | |
| 18 | });\r | |
| 19 | \r | |
| 20 | Ext.onReady(function() {\r | |
| 21 | Ext.tip.QuickTipManager.init();\r | |
| 22 | \r | |
| 23 | \r | |
| 24 | \r | |
| 25 | var store = Ext.create('Ext.data.TreeStore', {\r | |
| 26 | model: 'Task',\r | |
| 27 | proxy: {\r | |
| 28 | type: 'ajax',\r | |
| 29 | //the store will get the content from the .json file\r | |
| 30 | url: 'treegrid.json'\r | |
| 31 | },\r | |
| 32 | folderSort: true\r | |
| 33 | });\r | |
| 34 | \r | |
| 35 | //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel\r | |
| 36 | var tree = Ext.create('Ext.tree.Panel', {\r | |
| 37 | title: 'Core Team Projects',\r | |
| 38 | width: 500,\r | |
| 39 | height: 300,\r | |
| 40 | renderTo: Ext.getBody(),\r | |
| 41 | collapsible: true,\r | |
| 42 | useArrows: true,\r | |
| 43 | rootVisible: false,\r | |
| 44 | store: store,\r | |
| 45 | multiSelect: true,\r | |
| 46 | columns: [{\r | |
| 47 | xtype: 'treecolumn', //this is so we know which column will show the tree\r | |
| 48 | text: 'Task',\r | |
| 49 | width: 200,\r | |
| 50 | sortable: true,\r | |
| 51 | dataIndex: 'task',\r | |
| 52 | locked: true\r | |
| 53 | }, {\r | |
| 54 | //we must use the templateheader component so we can use a custom tpl\r | |
| 55 | xtype: 'templatecolumn',\r | |
| 56 | text: 'Duration',\r | |
| 57 | width: 150,\r | |
| 58 | sortable: true,\r | |
| 59 | dataIndex: 'duration',\r | |
| 60 | align: 'center',\r | |
| 61 | //add in the custom tpl for the rows\r | |
| 62 | tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', {\r | |
| 63 | formatHours: function(v) {\r | |
| 64 | if (v < 1) {\r | |
| 65 | return Math.round(v * 60) + ' mins';\r | |
| 66 | } else if (Math.floor(v) !== v) {\r | |
| 67 | var min = v - Math.floor(v);\r | |
| 68 | return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';\r | |
| 69 | } else {\r | |
| 70 | return v + ' hour' + (v === 1 ? '' : 's');\r | |
| 71 | }\r | |
| 72 | }\r | |
| 73 | })\r | |
| 74 | }, {\r | |
| 75 | text: 'Assigned To',\r | |
| 76 | width: 150,\r | |
| 77 | dataIndex: 'user',\r | |
| 78 | sortable: true\r | |
| 79 | }, {\r | |
| 80 | xtype: 'checkcolumn',\r | |
| 81 | header: 'Done',\r | |
| 82 | dataIndex: 'done',\r | |
| 83 | width: 40,\r | |
| 84 | stopSelection: false\r | |
| 85 | }, {\r | |
| 86 | text: 'Edit',\r | |
| 87 | width: 40,\r | |
| 88 | menuDisabled: true,\r | |
| 89 | xtype: 'actioncolumn',\r | |
| 90 | tooltip: 'Edit task',\r | |
| 91 | align: 'center',\r | |
| 92 | icon: '../simple-tasks/resources/images/edit_task.png',\r | |
| 93 | handler: function(grid, rowIndex, colIndex, actionItem, event, record, row) {\r | |
| 94 | Ext.Msg.alert('Editing' + (record.get('done') ? ' completed task' : '') , record.get('task'));\r | |
| 95 | },\r | |
| 96 | // Only leaf level tasks may be edited\r | |
| 97 | isDisabled: function(view, rowIdx, colIdx, item, record) {\r | |
| 98 | return !record.data.leaf;\r | |
| 99 | }\r | |
| 100 | }]\r | |
| 101 | });\r | |
| 102 | });\r |