Ext.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',
    collapsible: false,

    onRender: function(){

        Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);

        this.headers = this.body.createChild({
            cls: 'x-tree-headers'
        }, this.body.dom);

        var cols = this.columns, c;
        var totalWidth = 0;

        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;" + "text-align: " +  (c.align ? c.align : "inherit") + ";"
            });
        }

        this.headers.createChild({
            cls: 'x-clear'
        });

        // Update height to correct scroll
        this.on("bodyresize", function() {

            this.getTreeEl().setHeight( this.getTreeEl().getHeight() - this.headers.getHeight() );

        });

    }

});

Ext.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];

        n.cols = [];

        var cell = {
            css: "",
            attr: ""
        }

        var text = n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a, cell) : a[c.dataIndex]);

        n.cols[n.cols.length] = cols[0].dataIndex;

        var buf = [
            '<li class="x-tree-node" unselectable="on">',
                '<div ext:tree-node-id="', n.id, '" class="x-tree-node-el x-tree-node-leaf ', a.cls, '" unselectable="on" ext:column="', c.dataIndex ,'">',
                    '<div class="x-tree-col" style="width:', c.width - bw, 'px;" unselectable="on" ext:column="', c.dataIndex ,'">',
                        '<span class="x-tree-node-indent" unselectable="on">', this.indentMarkup, "</span>",
                        '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" unselectable="on" />',
                        '<img src="', a.icon || this.emptyIcon, '" "', cell.attr, '" 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 + '"' : "", ' unselectable="on">',
                            '<span unselectable="on" class="', cell.css ,'" ext:column="', c.dataIndex ,'" style="text-align: ', cols[0].align ? cols[0].align : "inherit"  ,'; ">', text, "</span>",
                        "</a>",
                    "</div>"
        ];

        for (var i = 1, len = cols.length; i < len; i++) {

            c = cols[i];

            var cell = {
                css: "",
                attr: ""
            }

            var text = (c.renderer ? c.renderer(a[c.dataIndex], n, a, cell) : a[c.dataIndex]);

            n.cols[n.cols.length] = cols[i].dataIndex;

            buf.push(
                '<div class="x-tree-col ', (c.cls ? c.cls : ''), '" style="width:', c.width - bw, 'px;" unselectable="on">',
                '<div class="x-tree-col-text ', cell.css,'" ', cell.attr,' ext:column="', c.dataIndex ,'" unselectable="on" id="', Ext.id(), '" style="text-align: ', c.align ? c.align : "inherit"  ,'; ">', text, "</div>",
                '</div>'
            );

        }

        buf.push(
            '<div class="x-clear" unselectable="on"></div></div>',
            '<ul class="x-tree-node-ct" style="display:none;" unselectable="on"></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;
    }
});

Ext.tree.ColumnTreeEditor = Ext.extend(Ext.util.Observable, {

    tree    : null,
    editor  : null,

    maxWidth  : 250,
    editDelay : 150,
    boundScroll : false,

    constructor: function(tree, config) {

        Ext.tree.ColumnTreeEditor.superclass.constructor.apply(this);

        this.addEvents({
            "afterNodeColumnEdit"  : true,
            "beforeNodeColumnEdit" : true
        });

        this.tree = tree;

        if( !tree.rendered ) {

            tree.on('render', this.initEditor, this);

        } else {

            this.initEditor(tree);

        }

    },

    initEditor: function(tree){

        tree.on('beforeclick', this.beforeNodeClick, this);

    },

    fitToTree: function(ed, el){

        var td = this.tree.getTreeEl().dom, nd = el.dom;

        if (td.scrollLeft > nd.offsetLeft) {
            td.scrollLeft = nd.offsetLeft; }

        var w = Math.min(
            this.maxWidth,
            (td.clientWidth > 20 ? td.clientWidth : td.offsetWidth) -
            Math.max(0, nd.offsetLeft - td.scrollLeft) -
            5
        );

        this.editor.setSize(w, '');

    },

    triggerEdit: function(node, e) {

        if( this.editor ) {
            this.editor.completeEdit(); }

        if( node.attributes.editable == false ) {
            return; }

        var obj = e.target;

        if (Ext.select(".x-tree-node-anchor", false, obj).getCount() == 1) {

            obj = Ext.select(".x-tree-node-anchor", false, obj).elements[0].firstChild;

        } else if (obj.nodeName == 'SPAN' || obj.nodeName == 'DIV') {

            obj = e.target;

        } else { return false; }

        e.stopEvent();
        e.stopPropagation();

        this.editNode  = node;
        this.editCol   = obj;
        this.editColID = Ext.get(obj).dom.getAttribute("ext:column");

        if( !this.editColID ) {
            return false; }

        for (var i = 0; i < this.tree.columns.length; i++) {

            if( this.tree.columns[i].dataIndex == this.editColID ) {

                if(this.tree.columns[i].editable == false) {
                    return; }

                if (this.tree.columns[i].editor) {
                    this.field = this.tree.columns[i].editor; }

                this.editColIndex = i;

                break;

            }

        }

        if( this.editor ) {
            this.editor.destroy(); }

        if( !this.fireEvent(
            "beforeNodeColumnEdit",
            this, this.tree, this.editNode, this.editColID, this.editNode.attributes[this.editColID]
        ) ) { return false; }

        this.editor = new Ext.Editor({
            alignment : 'l-l',
            autoSize  : false,
            hideEl    : false,
            cls       : 'x-small-editor x-tree-editor',
            shim      : true,
            shadow    : false
        });

        // Fix
        this.editor.alignment = "l-l";

        this.editor.on('beforestartedit', this.fitToTree,    this);
        this.editor.on('complete',        this.updateNode,   this);
        this.editor.on('specialkey',      this.onSpecialKey, this);

        this.editor.field = this.field.cloneConfig({
        });

        if( !this.boundScroll ) {

            this.tree.getTreeEl().on(
                'scroll',
                function() { if( this.editor ) { this.editor.cancelEdit(); } },
                this
            );

            this.boundScroll = true;

        }

        this.autoEditTimer = (function(obj, value){

            this.editor.startEdit(obj, value);

            if (obj.nodeName == 'DIV' ) {

                var width = obj.offsetWidth;
                this.editor.setSize(width);

            }

        }).defer(this.editDelay, this, [obj, this.editNode.attributes[this.editColID]]);

        return false;
    },

    beforeNodeClick: function(node, e){

        var sinceLast  = (this.lastClick ? this.lastClick.getElapsed() : 0);
        this.lastClick = new Date();

        if( sinceLast > this.editDelay && this.tree.getSelectionModel().isSelected(node)) {

            e.stopEvent();
            e.stopPropagation();

            this.triggerEdit(node, e);
            return false;

        } else {

            e.stopEvent();
            e.stopPropagation();

            if( this.editor ) { this.editor.completeEdit(); }
            this.triggerEdit(node, e);

        }

    },

    updateNode: function(ed, value, startValue){

        if( !this.editor.field.isValid() ) {
            return false; }

        this.editNode.cols[this.editColID]       = value; //for internal use only
        this.editNode.attributes[this.editColID] = value; //duplicate into array of node attributes

        if( this.tree.columns[this.editColIndex].renderer instanceof Function ) {

            var cell = {
                css : "",
                attr: ""
            };

            this.editCol.innerHTML = this.tree.columns[this.editColIndex].renderer(
                value,
                this.tree.getRootNode(),
                this.editNode.attributes,
                cell
            );

            Ext.get(this.editCol).set({ "class": ("x-tree-col-text " + cell.css) });

        } else {

            this.editCol.innerHTML = value;

        }   // if

        this.fireEvent("afterNodeColumnEdit", this, this.tree, this.editNode, this.editColID, value, startValue);

    },

    onHide: function(){

        Ext.tree.TreeEditor.superclass.onHide.call(this);

        if (this.editNode) {
            this.editNode.ui.focus(); }

    },

    onSpecialKey: function(field, e){

        var k = e.getKey();

        if (k == e.ESC) {

            e.stopEvent();
            this.editor.cancelEdit();

        } else if (k == e.ENTER && !e.hasModifier()) {

            e.stopEvent();
            this.editor.completeEdit();

        }

    }

});