ExtJs：複数の列に1つの列ヘッダー

Question

1つのヘッダーの下に複数の列を含むグリッドを作成できますか？

 
+-----------------------+-----------------------+ 
|  Column 1  | Column 2,3,4  | 
+-----------------------+-----------------------+ 
|      |  |  |  | 
+-----------------------+-----------------------+ 
|      |  |  |  | 
+-----------------------+-----------------------+ 
|      |  |  |  | 
+-----------------------------------------------+ 

サブフィールドの列を非表示にする方法はありません。それは何かのように見えます

 
+-----------------------+-----------------------+ 
|  Column 1  | Column 2,3,4  | 
+      +-----------------------+ 
|      |  |  |  | 
+-----------------------+-----------------------+ 
|      |  |  |  | 
+-----------------------+-----------------------+ 
|      |  |  |  | 
+-----------------------------------------------+ 

Answer 1

この1つはオーバーライドが必要です。

columns: [ 
    { 
     text: "Column 1", 
     // width, other settings 
    }, 
    { 
     text: "Columns 2, 3, 4", 
     // width is computed as sum of child columns 
     columns: [ 
      { 
       text: "", 
       columnName: "Column 2", // custom config 
       width: // needed 
      }, 
      { 
       text: "", 
       columnName: "Column 3", 
       width: // needed 
      }, 
      { 
       text: "", 
       columnName: "Column 4", 
       width: // needed 
      } 
     ] 
    } 
] 

注APIの一部ではないcolumnNameのconfigsを：ここにあなたの列の設定がどのように見えるかです。それは私がこれを補ったものです。

設定text: ""は、その列のヘッダーを非表示にします。 3つのサブカラムのすべてを設定すると、行全体が隠されますが、ヘッダーのある2pxの細い線が残ります。それを削除する方法がわかりません。それをCSSで消すことができるかもしれません。

これは、あなたの希望するレイアウトを提供します。メイン列のメニューからサブ列を非表示にすることができます。ただし、テキストがないため、メニューが正しく表示されません。それはcolumnNameが入る場所です。

Ext.grid.header.Container#getColumnMenuの出典を見つけてください。この関数だけのオーバーライドを作成する必要があります。ここではそれが行く方法は次のとおりです。

Ext.override(Ext.grid.header.Container, { 
    getColumnMenu: function(headerContainer) { 
     // stuff 
     for (; i < itemsLn; i++) { 
      item = items[i]; 
      menuItem = Ext.create("Ext.menu.CheckItem", { 
       text: item.columnName || item.text // <--- IMPORTANT LINE 
     // rest of the function is the same 
    } 
}); 

それを使用していない既存の列に影響を与えることなく、存在する場合、これはあなたのcolumnName設定をピックアップします。マルチカラムのヘッダトリガをクリックすると、サブカラムにネストされたオプションが表示されます。ファンシーにしたい場合は、いくつかのオーバーライドを使って非表示オプションを平坦化できるはずですが、私はそれをあなたに任せます。

注：これはすべてExt JS 4.0.7でテストされました。 4.1のリリース候補のヘッダーコンテナコードに大きな変更がありましたが、これが同じように動作することは保証できません。

Answer 2

あなたはまた、合併の列の周りに多くの機能のための例以下を参照することができ、など

http://docs.sencha.com/extjs/4.2.3/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#big-data-grid