Question

我创建了一个网格，其中包含固定宽度的列。由于固定宽度，某些列的扩展不足以显示完整内容，至少对于某些单元格而言。

现在我正在寻找一种方法来在其标题处双击时展开此列。

我注意到ColumnModel中有一个函数setColumnWidth（），但要继续这个，我必须得到内容的最大长度。

有人有什么建议吗？提前谢谢！

Answer 1

不确定将列扩展到内容的长度，这可能是一件好事。异常长的内容可能最终导致网格看起来很糟糕。但是，您可以向要扩展的任何列添加flex。

columns: [{
    header: 'Blah',
    width: 100,
    dataIndex: 'Blah'
},{
    header: 'Foo',
    flex: 1,
    dataIndex: 'Foo'
}]

在那一位，Foo列将展开以在Blah被分配为100px之后留下留下的剩余空间。

Answer 2

知道这是一个旧线程，但我想分享它，因为我有同样的问题。

我通过覆盖Ext.grid.column.Column的click事件处理程序解决了这个问题。处理了一个私有的onElDblClick事件，用于双击列标题的边缘重写此函数也可以双击整个列标题。接下来是覆盖onElClick事件处理程序，让它知道可以通过SetTimeout调用挂起双击操作，否则将始终调用附加到单击事件（如排序和下拉菜单）的任何事件。

请参阅以下代码以覆盖它。我只在ExtJS 4.1.1a上测试过，但很容易移植到其他ExtJS版本。


    // enable doubleclick on the column to expand it to the max width as well
    Ext.override(Ext.grid.column.Column, {
        /**
         * @private
         * Double click
         * @param e
         * @param t
         */
        onElDblClick: function(e, t) {
            var me = this,
                ownerCt = me.ownerCt;
            if (ownerCt && Ext.Array.indexOf(ownerCt.items, me) !== 0) {
                if (me.isOnLeftEdge(e) ) {
                    ownerCt.expandToFit(me.previousSibling('gridcolumn'));
                } else {
                    ownerCt.expandToFit(me);
                }
            }
        },
        onElClick: function(e, t) {
            // The grid's docked HeaderContainer.
            var me = this,
                ownerHeaderCt = me.getOwnerHeaderCt();

            if (me.el.getAttribute("data-dblclick") == null) {
                me.el.dom.setAttribute("data-dblclick", 1);
                setTimeout(function () {
                    if (me.el.getAttribute("data-dblclick") == 1) {
                        handleElClick(me, e, t);
                    }
                    me.el.dom.removeAttribute("data-dblclick");
                }, 300);
            } else {
                me.el.dom.removeAttribute("data-dblclick");
                me.onElDblClick(e, t);
            }

            function handleElClick(me, e, t) {
                var ownerHeaderCt = me.getOwnerHeaderCt();
                if (ownerHeaderCt && !ownerHeaderCt.ddLock) {
                    // Firefox doesn't check the current target in a within check.
                    // Therefore we check the target directly and then within (ancestors)
                    if (me.triggerEl && (e.target === me.triggerEl.dom || t === me.triggerEl.dom || e.within(me.triggerEl))) {
                        ownerHeaderCt.onHeaderTriggerClick(me, e, t);
                    // if its not on the left hand edge, sort
                    } else if (e.getKey() || (!me.isOnLeftEdge(e) && !me.isOnRightEdge(e))) {
                        me.toggleSortState();
                        ownerHeaderCt.onHeaderClick(me, e, t);
                    }
                }
            }
        }
    });

双击检查是我在https://stackoverflow.com/a/16033129/3436982找到的改编版本。

ExtJS网格列：展开列以显示完整内容

2 个答案: