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。