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

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 的单击事件处理程序解决了这个问题。有一个私有的 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找到的改编版本。