ExtJSグリッド列：フルコンテンツを表示する列を展開

Question

固定幅の列を持つグリッドを作成しました。 固定幅のため、一部の列は、少なくとも一部のセルで完全な内容を表示するのに十分なほど拡張されていません。

今、ヘッダーでダブルクリックするとこの列を展開する方法を探しています。

ColumnModelにsetColumnWidth（）関数があることに気づきましたが、これを続行するにはコンテンツの最大長を取得する必要があります。

誰かに助言がありますか？前もって感謝します！

Answer 1

内容の長さに合わせて列を拡大することについてはよく分かりませんが、それは良いことかもしれません。異常に長い量のコンテンツは、グリッドがひどく見えるようになることがあります。ただし、展開する列にフレックスを追加することもできます。

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

このビットでは、Blahに100pxが割り当てられた後、残りのスペースが残ります。

Answer 2

これは古いスレッドだと知っていますが、同じ問題があったので共有したいと思います。

Ext.grid.column.Columnのclickイベントハンドラをオーバーライドして解決しました。列ヘッダーの端をダブルクリックするために処理されるprivate 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の適合バージョンです。