js—extjs—扩展1

还是截个图吧,我表述的不是很清楚

本人用的是extjs3.3.1.如扩展代码无法使用，请根据各个版本进行修改。

扩展内容：本扩展用于使Ext.grid.GridView（以及任何继承自Ext.grid.GridView的类，如GroupingView、LockingGridView）支持如下的功能

1、在双击表头的调整列宽的区域，能够自动的将该列调整到最适合的宽度，够刚好容纳该列中最宽的内容

2、在列头菜单中加入一个菜单项，菜单项功能也是实现1中的功能。

说明：下文不会对代码进行详细的解释，许多细节希望读者可以自己细究，顺便提下，很多细节需要通过阅读ext.debug.js去了解。图我就不截了，扩展代码的使用方法很简单，只要将它放在一个Js文件中，添加到页面就可以支持上述的两个扩展功能了。

//使得双击表头的resize区域可以让该列自动将宽度置为最适合宽度{
    Ext.grid.GridView.prototype.splitHandleWidth = 8;
Ext.grid.GridView.SplitDragZone.prototype.init = Ext.grid.GridView.SplitDragZone.prototype.init.createSequence(function (id, sGroup, config) {
    Ext.EventManager.on(this.id, 'dblclick', this.handleDblClick, this);
    Ext.EventManager.on(this.id, 'click', this.handleClick, this);
});
Ext.grid.GridView.SplitDragZone.prototype.destroy = Ext.grid.GridView.SplitDragZone.prototype.destroy.createSequence(function () {
    Ext.EventManager.un(this.id, 'dblclick', this.handleDblClick, this);
    Ext.EventManager.un(this.id, 'click', this.handleClick, this);
});
Ext.grid.GridView.SplitDragZone.prototype.setOuterHandleElId = Ext.grid.GridView.SplitDragZone.prototype.setOuterHandleElId.createSequence(function (id) {
    Ext.EventManager.on(id, 'dblclick', this.handleDblClick, this);
    Ext.EventManager.on(id, 'click', this.handleClick, this);
});
Ext.grid.GridView.SplitDragZone.prototype.handleClick = function (e, el, o) {
    var t = this.view.findHeaderCell(e.getTarget());
    this.isHit = false;
    if (t && this.allowHeaderDrag(e)) {
        var xy = this.view.fly(t).getXY(),
            x = xy[0],
            exy = e.getXY(),
            ex = exy[0],
            w = t.offsetWidth,
            adjust = false;

        if ((ex - x) <= this.hw) {
            adjust = -1;
        } else if ((x + w) - ex <= this.hw) {
            adjust = 0;
        }
        if (adjust !== false) {
            this.cm = this.grid.colModel;
            var ci = this.view.getCellIndex(t);
            if (adjust == -1) {
                if (ci + adjust < 0) {
                    return;
                }
                while (this.cm.isHidden(ci + adjust)) {
                    --adjust;
                    if (ci + adjust < 0) {
                        return;
                    }
                }
            }
            this.cellIndex = ci + adjust;
            if (this.cm.isResizable(this.cellIndex) && !this.cm.isFixed(this.cellIndex)) {
                this.isHit = true;
                e.preventDefault();
                e.stopPropagation();
            }
        }
    }
}
Ext.grid.GridView.prototype.fixColumnWidth = function (colIndex) {
    var maxW = Ext.fly(this.getHeaderCell(colIndex)).getTextWidth();
    for (var i = 0; i < this.grid.store.getCount(); i++) {
        maxW = Math.max(maxW, Ext.fly(this.getCell(i, colIndex)).getTextWidth());
    }
    this.cm.setColumnWidth(colIndex, maxW + 10);
}
Ext.grid.GridView.SplitDragZone.prototype.handleDblClick = function (e, el, o) {
    if (this.isHit === true) {
        this.view.fixColumnWidth(this.cellIndex);
    }
}
//向列菜单中增加一个菜单项
Ext.grid.GridPanel.prototype.afterRender = Ext.grid.GridPanel.prototype.afterRender.createSequence(function () {
    if(this.view.hmenu){
    this.view.hmenu.add([
        { text: '合适列宽', id: this.getId() + '-auto-colwidth' }
    ]);
    this.view.hmenu.on('show', function () {
        var index = this.view.hdCtxIndex;
        if (this.colModel.isResizable(index)) {
            this.view.hmenu.get(this.getId() + '-auto-colwidth').show();
        } else {
            this.view.hmenu.get(this.getId() + '-auto-colwidth').hide();
        }
        this.view.hmenu.doLayout();
    }, this);
    this.view.hmenu.get(this.getId() + '-auto-colwidth').on('click', function () {
        this.view.fixColumnWidth(this.view.hdCtxIndex);
    }, this);
    }
})
//}