Hi,
So I couldn't get dommellenny's example working (I am not sure anchor layout will work in this case because it is a tree which is in one 'item', not an item per 'column'), but I have redone my original fix using CSS which is much better than looping through and changing the style attributes for each node:
So, the Ext.ux.tree.ColumnNodeUI.renderElements method you want to override to stop it from setting the 'style="width: blah;"' for the columns, and add in a 'depth-' + i class (where i = column index):
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 depth-0', (c.cls ? ' ' + c.cls : ''), '">',
'<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 depth-', i, (c.cls ? ' ' + c.cls : ''), '">',
'<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;
}
Then you want to override Ext.ux.tree.ColumnTree.onRender to create a stylesheet on the fly with the appropriate widths (the same ratio as those specified in columns):
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;
Ext.util.CSS.removeStyleSheet('columns');
var col_css = ""
for (var i = 0, len = cols.length; i < len; i++){
c = cols[i];
totalWidth += c.width;
if (i == 0) {
col_css += '.depth-' + i + ' {width: ' + (this.columns[i].width - 2 * this.borderWidth) + 'px;} ';
} else {
col_css += '.depth-' + i + ' {width: ' + (this.columns[i].width - this.borderWidth) + 'px;} ';
}
this.headers.createChild({
cls:'x-tree-hd depth-' + i + (c.cls ? ' ' + c.cls + '-hd' : ''),
cn: {
cls:'x-tree-hd-text',
html: c.header
}
});
}
Ext.util.CSS.createStyleSheet(col_css, 'columns');
Ext.util.CSS.refreshCache();
this.headers.createChild({cls: 'x-clear'});
// prevent floats from wrapping when clipped
this.headers.setWidth(totalWidth + scrollOffset);
this.innerCt.setWidth(totalWidth);
}
Then you want to add a resize listener to the the Ext.ux.tree.ColumnTree, with a callback that optionally expands widths in ratio to fill the container by changing the CSS on the fly:
'resize': {
fn: function(ob, adjWidth, adjHeight, rawWidth, rawHeight) {
if (adjWidth && adjHeight) {
if (this.autoExpand) {
this.setSize(ob.getInnerWidth());
this.headers.setWidth(ob.getInnerWidth());
this.innerCt.setWidth(ob.getInnerWidth() - 19);
var totalWidth = 0;
for (var i = 0; i < this.columns.length; i++) {
totalWidth += this.columns[i].width;
}
var availWidth = adjWidth;
var multiplier = (availWidth - 19) / totalWidth;
var col_css = ""
Ext.util.CSS.removeStyleSheet('columns');
for (var i = 0; i < this.columns.length; i++) {
this.columns[i].width = this.columns[i].width * multiplier;
if (i == 0) {
col_css += '.depth-' + i + ' {width: ' + (this.columns[i].width - 2 * this.borderWidth) + 'px;} ';
} else {
col_css += '.depth-' + i + ' {width: ' + (this.columns[i].width - this.borderWidth) + 'px;} ';
}
}
Ext.util.CSS.createStyleSheet(col_css, 'columns');
Ext.util.CSS.refreshCache();
}
}
}
}
I think this is a better way than my previous post.
I haven't actually altered the ColumNodeUI.js script, just extended it in my app. If you think these changes are worth going into the ColumnNodeUI ux, please shout and I wil attach an updated version of this user extension.
Em
11-05-2009, 10:41 AM
