3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
7 Ext.ns('Ext.ux.tree');
\r
10 * @class Ext.ux.tree.ColumnTree
\r
11 * @extends Ext.tree.TreePanel
\r
15 Ext.ux.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {
\r
17 borderWidth : Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
\r
18 cls : 'x-column-tree',
\r
20 onRender : function(){
\r
21 Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);
\r
22 this.headers = this.header.createChild({cls:'x-tree-headers'});
\r
24 var cols = this.columns, c;
\r
26 var scrollOffset = 19; // similar to Ext.grid.GridView default
\r
28 for(var i = 0, len = cols.length; i < len; i++){
\r
30 totalWidth += c.width;
\r
31 this.headers.createChild({
\r
32 cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
\r
34 cls:'x-tree-hd-text',
\r
37 style:'width:'+(c.width-this.borderWidth)+'px;'
\r
40 this.headers.createChild({cls:'x-clear'});
\r
41 // prevent floats from wrapping when clipped
\r
42 this.headers.setWidth(totalWidth+scrollOffset);
\r
43 this.innerCt.setWidth(totalWidth);
\r
47 Ext.reg('columntree', Ext.ux.tree.ColumnTree);
\r
50 Ext.tree.ColumnTree = Ext.ux.tree.ColumnTree;
\r
54 * @class Ext.ux.tree.ColumnNodeUI
\r
55 * @extends Ext.tree.TreeNodeUI
\r
57 Ext.ux.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
\r
58 focus: Ext.emptyFn, // prevent odd scrolling behavior
\r
60 renderElements : function(n, a, targetNode, bulkRender){
\r
61 this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
\r
63 var t = n.getOwnerTree();
\r
64 var cols = t.columns;
\r
65 var bw = t.borderWidth;
\r
69 '<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf ', a.cls,'">',
\r
70 '<div class="x-tree-col" style="width:',c.width-bw,'px;">',
\r
71 '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
\r
72 '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow">',
\r
73 '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on">',
\r
74 '<a hidefocus="on" class="x-tree-node-anchor" href="',a.href ? a.href : "#",'" tabIndex="1" ',
\r
75 a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',
\r
76 '<span unselectable="on">', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</span></a>",
\r
78 for(var i = 1, len = cols.length; i < len; i++){
\r
81 buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
\r
82 '<div class="x-tree-col-text">',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</div>",
\r
86 '<div class="x-clear"></div></div>',
\r
87 '<ul class="x-tree-node-ct" style="display:none;"></ul>',
\r
90 if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
\r
91 this.wrap = Ext.DomHelper.insertHtml("beforeBegin",
\r
92 n.nextSibling.ui.getEl(), buf.join(""));
\r
94 this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
\r
97 this.elNode = this.wrap.childNodes[0];
\r
98 this.ctNode = this.wrap.childNodes[1];
\r
99 var cs = this.elNode.firstChild.childNodes;
\r
100 this.indentNode = cs[0];
\r
101 this.ecNode = cs[1];
\r
102 this.iconNode = cs[2];
\r
103 this.anchor = cs[3];
\r
104 this.textNode = cs[3].firstChild;
\r
109 Ext.tree.ColumnNodeUI = Ext.ux.tree.ColumnNodeUI;
\r