PDA

View Full Version : ColumnTree



sushiBMW
11 Jan 2010, 11:48 PM
Hello,
I'm quite new into ExtJS, and I'm doing my first steps with it. Right now I'm using Ruby on Rails and I have created a table with the Nested Set structure within RoR.

I can access this table via ExtJS and I can generate a tree with the folder structure with ExtJS (I get the data as JSON from the RoR table). And it looks like this (see screenshot).

Now I have a problem, this is my code for the html-page:



Ext.onReady(function(){
var tree = new Ext.ux.tree.ColumnTree({
width: 550,
height: 200,
rootVisible:false,
autoScroll:true,
title: 'tasks',
renderTo: Ext.getBody(),

columns:[{
header:'Names',
width:300,
id:'text',
dataIndex:'text'
}],

loader: new Ext.tree.TreeLoader({
dataUrl:'categories.json',
requestMethod:'GET',
uiProviders:{
'col': Ext.ux.tree.ColumnNodeUI
}
}),

root: new Ext.tree.AsyncTreeNode({
text:'text'
})
});
});
As you can see in the screenshoot, I don't get a real column. It just appears under the title of the tree. When I put in more columns, the column names will be placed under the first columnname, and there are no columns (see screenshoot ext0.jpg).
The code is then like this:



columns:[{
header:'Names',
width:300,
id:'text',
dataIndex:'text'
},{
header:'Names',
width:100,
id:'description',
dataIndex:'description'
}],
What am I doing wrong?

My second question is, how can I put a link in a column? Let's say I want to reference to another page, when a folder is opened in the tree. Because some detail information about this folder can be found somewhere else. For every folder/items that are openend, I would need 4 buttons, to navigate to 4 different pages.
I hope I made myself clear...

Or is there another kind of tree that is fitting better to my requirements?

Thank you very much


editing:

This is my ColumnNodeUI.js



/*!
* Ext JS Library 3.1.0
* Copyright(c) 2006-2009 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
*/
Ext.ns('Ext.ux.tree');

/**
* @class Ext.ux.tree.ColumnTree
* @extends Ext.tree.TreePanel
*
* @xtype columntree
*/
Ext.ux.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {
lines : false,
borderWidth : Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
cls : 'x-column-tree',

onRender : function(){
Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);
this.headers = this.header.createChild({cls:'x-tree-headers'});

var cols = this.columns, c;
var totalWidth = 0;
var scrollOffset = 19; // similar to Ext.grid.GridView default

for(var i = 0, len = cols.length; i < len; i++){
c = cols[i];
totalWidth += c.width;
this.headers.createChild({
cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
cn: {
cls:'x-tree-hd-text',
html: c.header
},
style:'width:'+(c.width-this.borderWidth)+'px;'
});
}
this.headers.createChild({cls:'x-clear'});
// prevent floats from wrapping when clipped
this.headers.setWidth(totalWidth+scrollOffset);
this.innerCt.setWidth(totalWidth);
}
});

Ext.reg('columntree', Ext.ux.tree.ColumnTree);

//backwards compat
Ext.tree.ColumnTree = Ext.ux.tree.ColumnTree;


/**
* @class Ext.ux.tree.ColumnNodeUI
* @extends Ext.tree.TreeNodeUI
*/
Ext.ux.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
focus: Ext.emptyFn, // prevent odd scrolling behavior

renderElements : function(n, a, targetNode, bulkRender){
this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';

var t = n.getOwnerTree();
var cols = t.columns;
var bw = t.borderWidth;
var c = cols[0];

var buf = [
'<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf ', a.cls,'">',
'<div class="x-tree-col" style="width:',c.width-bw,'px;">',
'<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
'<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow">',
'<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on">',
'<a hidefocus="on" class="x-tree-node-anchor" href="',a.href ? a.href : "#",'" tabIndex="1" ',
a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',
'<span unselectable="on">', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</span></a>",
"</div>"];
for(var i = 1, len = cols.length; i < len; i++){
c = cols[i];

buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
'<div class="x-tree-col-text">',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</div>",
"</div>");
}
buf.push(
'<div class="x-clear"></div></div>',
'<ul class="x-tree-node-ct" style="display:none;"></ul>',
"</li>");

if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
this.wrap = Ext.DomHelper.insertHtml("beforeBegin",
n.nextSibling.ui.getEl(), buf.join(""));
}else{
this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
}

this.elNode = this.wrap.childNodes[0];
this.ctNode = this.wrap.childNodes[1];
var cs = this.elNode.firstChild.childNodes;
this.indentNode = cs[0];
this.ecNode = cs[1];
this.iconNode = cs[2];
this.anchor = cs[3];
this.textNode = cs[3].firstChild;
}
});

//backwards compat
Ext.tree.ColumnNodeUI = Ext.ux.tree.ColumnNodeUI;