examples/tree/treegrid.js

   1 Ext.require([
   2     'Ext.data.*',
   3     'Ext.grid.*',
   4     'Ext.tree.*'
   5 ]);
   6
   7 Ext.onReady(function() {
   8     //we want to setup a model and store instead of using dataUrl
   9     Ext.define('Task', {
  10         extend: 'Ext.data.Model',
  11         fields: [
  12             {name: 'task',     type: 'string'},
  13             {name: 'user',     type: 'string'},
  14             {name: 'duration', type: 'string'}
  15         ]
  16     });
  17
  18     var store = Ext.create('Ext.data.TreeStore', {
  19         model: 'Task',
  20         proxy: {
  21             type: 'ajax',
  22             //the store will get the content from the .json file
  23             url: 'treegrid.json'
  24         },
  25         folderSort: true
  26     });
  27
  28     //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
  29     var tree = Ext.create('Ext.tree.Panel', {
  30         title: 'Core Team Projects',
  31         width: 500,
  32         height: 300,
  33         renderTo: Ext.getBody(),
  34         collapsible: true,
  35         useArrows: true,
  36         rootVisible: false,
  37         store: store,
  38         multiSelect: true,
  39         singleExpand: true,
  40         //the 'columns' property is now 'headers'
  41         columns: [{
  42             xtype: 'treecolumn', //this is so we know which column will show the tree
  43             text: 'Task',
  44             flex: 2,
  45             sortable: true,
  46             dataIndex: 'task'
  47         },{
  48             //we must use the templateheader component so we can use a custom tpl
  49             xtype: 'templatecolumn',
  50             text: 'Duration',
  51             flex: 1,
  52             sortable: true,
  53             dataIndex: 'duration',
  54             align: 'center',
  55             //add in the custom tpl for the rows
  56             tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', {
  57                 formatHours: function(v) {
  58                     if (v < 1) {
  59                         return Math.round(v * 60) + ' mins';
  60                     } else if (Math.floor(v) !== v) {
  61                         var min = v - Math.floor(v);
  62                         return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
  63                     } else {
  64                         return v + ' hour' + (v === 1 ? '' : 's');
  65                     }
  66                 }
  67             })
  68         },{
  69             text: 'Assigned To',
  70             flex: 1,
  71             dataIndex: 'user',
  72             sortable: true
  73         }]
  74     });
  75 });