You are here:

ExtTreeGrid


We recently had to implement a user interface that included a editable grid displaying a tree-structure. Naturally we first turned our attention to the Ext.ux.tree.TreeGrid which was officially released with ExtJS 3.1. Sadly this component lacks the current high standard set by ExtJS components such as the Ext.grid.GridPanel, Ext.tree.TreePanel or the whole layout engine. Even worse it also lacks any documentation at all – just a side note (or a broad hint to de developers ;-)

In our use-case, especially the column-model that’s based on the Ext.list.ListView column-model, which made implementing editable fields quite hard and ugly, and some problems with calculating column widths as well as the lack of support for auto-expanding columns (we could correct the last two things by “hacking” the respective methods) proved to be a real show-stopper, so we started to think the other way ’round: why not use the current high-quality Ext.grid.GridPanel and Ext.grid.EditorGridPanel and extend them to be able to display tree-structures?

On the basis of the componentized structure (panel component, store, column model, view and selection model) of Ext.grid.GridPanel we identified that it should be enough to just implement our own store that’s able to read tree-like-structures and our own view that modifies row and cell rendering to handle alls those tree-features. That said, implementation went quite smooth, even though we had to copy some larger code fragments from the overridden base classes. The following code is by no means complete or perhaps it’s not even production-ready outside our own application (as it doesn’t support adding and removing or reordering nodes yet), but we think that this approach would be much more flexible and usable than using the current Ext.ux.tree.TreeGrid. Perhaps the ExtJS developers could give that approach a try…

The first step was to turn a tree-structure into a set of records usable by the grid component:

Code: Select all | Linenumbers on/off
  1.     tree:null,
  2.  
  3.     constructor:function(meta, recordType){
  4.         Ext.ux.tree.TreeReader.superclass.constructor.call(this, meta, recordType || meta.fields);
  5.     },
  6.  
  7.     load:function(node){
  8.         if(node.attributes.children){
  9.             var cs = node.attributes.children;
  10.             for(var i =0, len = cs.length; i < len; i++){
  11.                 var cn = node.appendChild(this.createNode(cs[i]));
  12.                 this.load(cn);
  13.             }
  14.         }
  15.     },
  16.  
  17.     createNode:function(attr){
  18.         var node =new Ext.data.Node(attr);
  19.         node.expanded=(attr.expanded===true);
  20.         return node;
  21.     },
  22.    
  23.     /**
  24.      * Create a data block containing Ext.data.Records from a tree.
  25.      */
  26.     readRecords:function(o){
  27.  
  28.         var root    =this.createNode({
  29.             text:'Root',
  30.             id:'root',
  31.             children: o
  32.         });
  33.         this.tree   =new Ext.data.Tree(root);
  34.         this.load(root);
  35.  
  36.         var f       =this.recordType.prototype.fields;
  37.         var records =[];
  38.         root.cascade(function(node){
  39.             if(node !== root){
  40.                 var record =newthis.recordType(this.extractValues(node, f.items), node.id);
  41.                 record.node     = node;
  42.                 record.depth    = node.getDepth();
  43.                 records.push(record);
  44.             }
  45.         },this);
  46.  
  47.         return{
  48.             success :true,
  49.             records : records,
  50.             totalRecords : records.length
  51.         };
  52.     },
  53.  
  54.     /**
  55.      * type-casts a single node
  56.      */
  57.     extractValues :function(node, fields){
  58.         var f, values ={};
  59.         for(var j =0; j < fields.length; j++){
  60.             f = fields[j];
  61.             var v = node.attributes[f.mapping];
  62.             values[f.name]= f.convert((v !== undefined)? v : f.defaultValue, node);
  63.         }
  64.         return values;
  65.     }
  66. });

This allows us to simple hand over a tree-like structure within the data attribute of our grid store. The major work of rendering the tree was handed over to our own implementation of a grid view:

Code: Select all | Linenumbers on/off
  1. Ext.ux.tree.GridView= Ext.extend(Ext.grid.GridView,{
  2.  
  3.     useArrows:true,
  4.  
  5.     staticTree:false,
  6.  
  7.     constructor:function(config){
  8.         this.emptyIcon  = Ext.BLANK_IMAGE_URL;
  9.  
  10.         Ext.ux.tree.GridView.superclass.constructor.call(this, config);
  11.         this.templates          ={};
  12.         this.templates.master   =new Ext.Template(
  13.             '<div class="x-grid3 tq-treegrid" hidefocus="true">',
  14.                 '<div class="x-grid3-viewport">',
  15.                     '<div class="x-grid3-header">',
  16.                         '<div class="x-grid3-header-inner">',
  17.                             '<div class="x-grid3-header-offset" style="{ostyle}">{header}</div>',
  18.                         '</div>',
  19.                         '<div class="x-clear"></div>',
  20.                     '</div>',
  21.                     '<div class="x-grid3-scroller">',
  22.                         '<div class="x-grid3-body ',(this.useArrows?'x-tree-arrows':this.lines?'x-tree-lines':'x-tree-no-lines'),'" style="{bstyle}">{body}</div>',
  23.                         '<a href="#" class="x-grid3-focus" tabIndex="-1"></a>',
  24.                     '</div>',
  25.                 '</div>',
  26.                 '<div class="x-grid3-resize-marker">&#160;</div>',
  27.                 '<div class="x-grid3-resize-proxy">&#160;</div>',
  28.             '</div>'
  29.         );
  30.  
  31.         this.templates.row  =new Ext.Template(
  32.             '<div class="x-grid3-row {alt}" style="{tstyle}">',
  33.                 '<table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
  34.                     '<tbody class="x-tree-node">',
  35.                         '<tr>{cells}</tr>',
  36.                         (this.enableRowBody?'<tr class="x-grid3-row-body-tr" style="{bodyStyle}"><td colspan="{cols}" class="x-grid3-body-cell" tabIndex="0" hidefocus="on"><div class="x-grid3-row-body">{body}</div></td></tr>':''),
  37.                     '</tbody>',
  38.                 '</table>',
  39.             '</div>'
  40.         );
  41.         this.templates.treeCell=new Ext.Template(
  42.             '<td class="tq-treegrid-col x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}" tabIndex="0" {cellAttr}>',
  43.                 '<div ext:tree-node-id="{nodeId}" class="x-grid3-col-{id} x-tree-node-el x-unselectable" unselectable="on" {attr}>',
  44.                     '<div class="tq-treegrid-icons">',
  45.                         '<span class="x-tree-node-indent">{nodeIndent}</span>',
  46.                         '<img src="',this.emptyIcon,'" class="x-tree-ec-icon x-tree-elbow {nodeTreeIconCls}" />',
  47.                         '<img src="',this.emptyIcon,'" class="x-tree-node-icon {nodeIconCls}" unselectable="on" />',
  48.                     '</div>',
  49.                     '<div class="x-grid3-cell-inner" unselectable="on" {attr}>',
  50.                         '{value}',
  51.                     '</div>',
  52.                 '</div>',
  53.             '</td>'
  54.         );
  55.     },
  56.  
  57.     getChildIndentUI:function(node){
  58.         var indentBuffer    =[];
  59.         var parentNode      = node.parentNode;
  60.         while(parentNode){
  61.             if(!parentNode.isRoot){
  62.                 if(!parentNode.isLast()){
  63.                     indentBuffer.unshift('<img src="'+this.emptyIcon+'" class="x-tree-elbow-line" />');
  64.                 }else{
  65.                     indentBuffer.unshift('<img src="'+this.emptyIcon+'" class="x-tree-icon" />');
  66.                 }
  67.             }
  68.             parentNode = parentNode.parentNode;
  69.         }
  70.         return indentBuffer.join("");
  71.     },
  72.  
  73.     getTreeNodeIcon:function(node){
  74.         var treeIcon    = node.isLast()?"x-tree-elbow-end":"x-tree-elbow";
  75.         if(node.hasChildNodes()&&!this.staticTree){
  76.             if(node.expanded){
  77.                 treeIcon +="-minus";
  78.             }else{
  79.                 treeIcon +="-plus";
  80.             }
  81.             treeIcon +=' tq-tree-node-control';
  82.         }
  83.         return treeIcon;
  84.     },
  85.  
  86.     // private
  87.     doRender:function(cs, rs, ds, startRow, colCount, stripe){
  88.         // buffers
  89.         var rowBuffer =[];
  90.         var cellBuffer;
  91.         var cell;
  92.         var cellTemplate;
  93.         var cellProperties ={};
  94.         var rowProperties ={
  95.             tstyle:'width:'+this.getTotalWidth()+';'
  96.         };
  97.         var record;
  98.         var depthBuffer =[];
  99.         var hasTreeCol;
  100.  
  101.         for(var j =0, len = rs.length; j < len; j++){
  102.             record          = rs[j];
  103.             cellBuffer      =[];
  104.             hasTreeCol      =false;
  105.             var rowIndex    =(j+startRow);
  106.  
  107.  
  108.             for(var i =0; i < colCount; i++){
  109.                 cell                    = cs[i];
  110.                 cellProperties.id       = cell.id;
  111.                 cellProperties.css      =(i ===0)?'x-grid3-cell-first ':(i ==(colCount -1)?'x-grid3-cell-last ':'');
  112.                 cellProperties.attr     = cellProperties.cellAttr='';
  113.                 cellProperties.value    = cell.renderer.call(cell.scope, record.data[cell.name], cellProperties, record, rowIndex, i, ds);
  114.                 cellProperties.style    = cell.style;
  115.                 if(Ext.isEmpty(cellProperties.value)){
  116.                     cellProperties.value='&#160;';
  117.                 }
  118.                 if(this.markDirty&& record.dirty&& Ext.isDefined(record.modified[cell.name])){
  119.                     cellProperties.css+=' x-grid3-dirty-cell';
  120.                 }
  121.  
  122.                 if(cell.scope.treeCol&&!hasTreeCol && record.node){
  123.                     hasTreeCol  =true;
  124.                     var node    = record.node;
  125.                    
  126.                     cellProperties.nodeIndent   =this.getChildIndentUI(node);
  127.                     cellProperties.nodeIconCls  = node.attributes.iconCls||'';
  128.                
  129.                     cellProperties.nodeTreeIconCls  =this.getTreeNodeIcon(node);
  130.  
  131.                     cellTemplate =this.templates.treeCell;
  132.                 }else{
  133.                     cellTemplate =this.templates.cell;
  134.                 }
  135.                 cellBuffer[cellBuffer.length]= cellTemplate.apply(cellProperties);
  136.  
  137.             }
  138.             var alt =[];
  139.  
  140.             if(record.depth&& record.node){
  141.                 if(depthBuffer.length< record.depth){
  142.                     rowBuffer.push('<div class="x-tree-node-ct">');
  143.                     depthBuffer.push('</div>');
  144.                 }else{
  145.                     while(depthBuffer.length> record.depth){
  146.                         rowBuffer.push(depthBuffer.pop());
  147.                     }
  148.                 }
  149.  
  150.                 if(this.staticTree){
  151.                     alt.push('tq-treegrid-static');
  152.                 }
  153.  
  154.                 if(node.isLeaf()){
  155.                     alt.push('x-tree-node-leaf');
  156.                 }elseif(node.expanded){
  157.                     alt.push('x-tree-node-expanded');
  158.                 }else{
  159.                     alt.push('x-tree-node-collapsed');
  160.                 }
  161.             }
  162.  
  163.             if(stripe &&((rowIndex+1)%2===0)){
  164.                 alt.push('x-grid3-row-alt');
  165.             }
  166.             if(record.dirty){
  167.                 alt.push(' x-grid3-dirty-row');
  168.             }
  169.  
  170.             rowProperties.cols      = colCount;
  171.             rowProperties.nodeId    = record.node.id;
  172.             rowProperties.cells     = cellBuffer.join('');
  173.             if(this.getRowClass){
  174.                 alt.push(this.getRowClass(record, rowIndex, rowProperties, ds));
  175.             }
  176.             rowProperties.alt   = alt.join(' ');
  177.            
  178.             rowBuffer[rowBuffer.length]=  this.templates.row.apply(rowProperties);
  179.         }
  180.  
  181.         while(depthBuffer.length){
  182.             rowBuffer.push(depthBuffer.pop());
  183.         }
  184.         return rowBuffer.join('');
  185.     },
  186.  
  187.     afterRender:function(){
  188.         Ext.ux.tree.GridView.superclass.afterRender.call(this);
  189.  
  190.         if(!this.staticTree){
  191.             this.mainBody.on('click',function(ev, el){
  192.                 this.toggleNode(el);
  193.             },this,{
  194.                 delegate:'.tq-tree-node-control'
  195.             });
  196.             this.mainBody.on('dblclick',function(ev, el){
  197.                 this.toggleNode(el);
  198.             },this,{
  199.                 delegate:'.x-tree-node-el '
  200.             });
  201.         }
  202.     },
  203.  
  204.     toggleNode:function(el){
  205.         var row     = Ext.get(this.findRow(el));
  206.         var node    =this.grid.getStore().getAt(row.dom.rowIndex).node;
  207.  
  208.         var childCnt    = row.next('.x-tree-node-ct',false);
  209.         var nodeCtrl    = row.child('.tq-tree-node-control',false);
  210.  
  211.         if(childCnt && nodeCtrl){
  212.             if(node.expanded){
  213.                 childCnt.enableDisplayMode('block');
  214.                 childCnt.stopFx();
  215.  
  216.                 row.removeClass('x-tree-node-expanded');
  217.                 nodeCtrl.removeClass(node.isLast()?"x-tree-elbow-end-minus":"x-tree-elbow-minus");
  218.                 row.addClass('x-tree-node-collapsed');
  219.                 nodeCtrl.addClass(node.isLast()?"x-tree-elbow-end-plus":"x-tree-elbow-plus");
  220.  
  221.                 childCnt.slideOut('t',{
  222.                     callback :function(){
  223.                        row.highlight();
  224.                        node.expanded    =false;
  225.                     },
  226.                     scope:this,
  227.                     duration: .25
  228.                 });
  229.                
  230.             }else{
  231.                 childCnt.stopFx();
  232.  
  233.                 row.addClass('x-tree-node-expanded');
  234.                 nodeCtrl.addClass(node.isLast()?"x-tree-elbow-end-minus":"x-tree-elbow-minus");
  235.                 row.removeClass('x-tree-node-collapsed');
  236.                 nodeCtrl.removeClass(node.isLast()?"x-tree-elbow-end-plus":"x-tree-elbow-plus");
  237.  
  238.                 childCnt.slideIn('t',{
  239.                    callback :function(){
  240.                         childCnt.highlight();
  241.                         node.expanded   =true;
  242.                     },
  243.                     scope:this,
  244.                     duration: .25
  245.                 });
  246.             }
  247.         }
  248.     },
  249.  
  250.     getRows:function(){
  251.         returnthis.hasRows()?this.mainBody.query(this.rowSelector):[];
  252.     }
  253.  
  254. });

That's where the hard work is done (event though a decent amount of code had to be copied over from the original implementation). Be aware that we currently use CSS classes from the grid itself, from the tree and from the treegrid - that's also not really production ready outside our environment.
Together with some CSS additions we can easily set up our own tree grid:

Code: Select all | Linenumbers on/off
  1. /**
  2.  * Tree grid
  3.  */
  4. .tq-treegrid.tq-treegrid-col{
  5.     border:none;
  6. }
  7.  
  8. .tq-treegrid.tq-treegrid-icons{
  9.     float:left;
  10. }
  11.  
  12. .tq-treegrid.x-tree-node-el{
  13.     line-height:13px;
  14.     padding:1px3px1px5px;
  15. }
  16.  
  17. .tq-treegrid .tq-treegrid-static .x-tree-ec-icon{
  18.     display:none;
  19. }
  20.  
  21. .tq-treegrid .tq-treegrid-static.x-tree-node-el{
  22.     cursor:default;
  23. }
Code: Select all | Linenumbers on/off
  1. var treeGrid    =new Ext.grid.EditorGridPanel({
  2.     renderTo: Ext.getBody(),
  3.     autoHeight:true,
  4.     width:400,
  5.     columnLines:true,
  6.     autoExpandColumn:'col-name',
  7.     view:new Ext.ux.tree.GridView({
  8.         useArrows:true,
  9.         staticTree:false
  10.     }),
  11.     store:{
  12.         xtype:'store',
  13.         autoDestroy:true,
  14.         reader:new Ext.ux.tree.TreeReader({
  15.             fields:[{
  16.                 name:'id',
  17.                 mapping:'id',
  18.                 type:'int'
  19.             },{
  20.                 name:'name',
  21.                 mapping:'name'
  22.             },{
  23.                 name:'cost',
  24.                 mapping:'cost',
  25.                 type:'float'
  26.             }]
  27.         }),
  28.         data:[{
  29.             id:1,
  30.             name:'Company A',
  31.             cost:1000000.00,
  32.             leaf:false,
  33.             expanded:true,
  34.             children:[{
  35.                 id:11,
  36.                 name:'Department AA',
  37.                 cost:800000.00,
  38.                 leaf:false,
  39.                 expanded:true,
  40.                 children:[{
  41.                     id:111,
  42.                     name:'Thing AAA',
  43.                     cost:300000.00,
  44.                     leaf:true
  45.                 },{
  46.                     id:112,
  47.                     name:'Thing AAB',
  48.                     cost:500000.00,
  49.                     leaf:true
  50.                 }]
  51.             },{
  52.                 id:12,
  53.                 name:'Department AB',
  54.                 cost:200000.00,
  55.                 leaf:false,
  56.                 expanded:true,
  57.                 children:[{
  58.                     id:121,
  59.                     name:'Thing ABA',
  60.                     cost:50000.00,
  61.                     leaf:true
  62.                 },{
  63.                     id:122,
  64.                     name:'Thing ABB',
  65.                     cost:150000.00,
  66.                     leaf:true
  67.                 }]
  68.             }]
  69.         },{
  70.             id:2,
  71.             name:'Company B',
  72.             cost:200000.00,
  73.             leaf:false,
  74.             expanded:true,
  75.             children:[{
  76.                 id:21,
  77.                 name:'Department BA',
  78.                 cost:100000.00,
  79.                 leaf:false,
  80.                 expanded:true,
  81.                 children:[{
  82.                     id:211,
  83.                     name:'Thing BAA',
  84.                     cost:50000.00,
  85.                     leaf:true
  86.                 },{
  87.                     id:212,
  88.                     name:'Thing BAB',
  89.                     cost:50000.00,
  90.                     leaf:true
  91.                 }]
  92.             },{
  93.                 id:22,
  94.                 name:'Department BB',
  95.                 cost:100000.00,
  96.                 leaf:false,
  97.                 expanded:true,
  98.                 children:[{
  99.                     id:221,
  100.                     name:'Thing BBA',
  101.                     cost:90000.00,
  102.                     leaf:true
  103.                 },{
  104.                     id:222,
  105.                     name:'Thing BBB',
  106.                     cost:10000.00,
  107.                     leaf:true
  108.                 }]
  109.             }]
  110.         }]
  111.     },
  112.     columns:[{
  113.         header:'Id',
  114.         dataIndex:'id',
  115.         width:30
  116.     },{
  117.         header:'Name',
  118.         id:'col-name',
  119.         dataIndex:'name',
  120.         treeCol:true
  121.     },{
  122.         header:'Cost',
  123.         dataIndex:'cost',
  124.         width:80
  125.     }]
  126. });


Software competencies
PHP weitverbreitete Skriptsprache zur Webentwicklung Java, objektorientierte Programmiersprache Apple Anwendungsentwicklung MySQL Server, relationales Datenbankverwaltungssystem PostgreSQL, freies, objektrelationales Datenbankmanagementsystem Oracle Datenbanksysteme Apache HTTP Server, der meistbenutzte Webserver im Internet TYPO3, das meistverbreitetste Open Source Enterprise Content Management System Magento, OpenSource eCommerce Plattform xtCommerce, Open Source Shopsystem, in Version 4 Veyton genannt Open Source, quelloffene Software