    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 = [
                 '',
                    '',
                        '',this.indentMarkup,"",
                        '',
                        '',
                        '',
                        '', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"",
                    ""];
             for(var i = 1, len = cols.length; i < len; i++){
                 c = cols[i];

                 buf.push('',
                            '',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"",
                          "");
             }
             buf.push(
                '',
                '',
                "");

            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;