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。