web-dev-qa-db-ja.com

extjs3グリッドパネルで列を表示/非表示にする方法

チェックボックスの値に応じて、グリッドパネルの列を表示/非表示にする必要があるグリッドパネルがあります。チェックボックスがオンの場合、グリッドに列を表示する必要があり、チェックボックスがオフの場合、グリッド内の列を非表示にする必要があります。

これが私のコードです

var chkEnableDisplayResponsibilityForAction = '<%=Session["chkEnableDisplayResponsibilityForAction"]%>';

 var flags = Boolean.parse(chkEnableDisplayResponsibilityForAction);
 var flags1 = !Boolean.parse(chkEnableDisplayResponsibilityForAction)

 var colModel = new Ext.grid.ColumnModel([
 { header: "PricePlanID", width: 100, sortable: true, dataIndex: 'PricePlanID', hidden: flags, hideable: flags1 },
  ]);

ページを更新すると、チェックボックスの値に応じて列を切り替えることができません。しかし、ログインしてログアウトすると、グリッドパネルで変更を確認できます。グリッドパネルの列の値を更新するのを手伝ってくれる人はいますか？

extjsextjs3
11
xrx215

extJS API、特に ColumModelsetHiddenメソッドがある場合、GridPanelの列を非表示/表示します。

myGrid.getColumnModel().setHidden(0, true);

また、チェックボックスのonchangeイベントをフックして、列を表示または非表示にできるようにする必要があります

24
RageZ

Ext JS 4.1では、列を非表示にするには、次を使用します。

grid.columns[0].setVisible(false);

SetHidden（）メソッドを持つgetColumnModel（）は、グリッドの一部ではなくなったようです： http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid。パネル

12
Tom

列ヘッダーメニューを使用して列を表示/非表示にすることができます-表示する列を選択できます。とにかく、列を表示/非表示にしたい場合は、これを試してください

myGrid.getColumnModel().setHidden(0, true);
3
Igor Pavelek

ExtJS 4では、グリッドパネルにアクセスしてから、Columnオブジェクトの配列であるcolumns属性にアクセスします。

そこから、配列イテレータメソッド（ http://www.diveintojavascript.com/core-javascript-reference/the-array-object ）を使用してアクションを実行できます。

以下の例では、ヘッダー名に基づいていくつかの列を非表示および表示していますが、任意の列属性に基づいてアクションを実行できることは明らかです。

var grid = Ext.getCmp( 'my_grid_panel' );

grid.columns.forEach( function( col ) {
   if( ( col.text == "Foo" ) || ( col.text == "Bar" ) ) {
      col.setVisible( true );
   } else if( col.text == "Baz" ) {
      col.setVisible( false );
   }
});
1
Poul
setVisibleColumn       : function(name, flag) {
    name = Ext.Array.from(name);
    var column;

    for (var i = 0; i < name.length; i++) {
        column = this.getColumn(name[i]);
        if (column) {
            flag ? column.show() : column.hide();
        }
    }

}
0
Luis Munoz

上記の答えはかなり良いと思います。しかし、私はあなたにアドバイスをさせてください。

1）ExtJS 4.xでは、Ext.getCmp（）の代わりにExt.ComponentQuery `sメソッドを使用することをお勧めします

2）グリッドの列を表示/非表示にするには、次のコードを使用できます

Ext.ComponentQuery.query('grid gridcolumn[dataIndex^="service"]')[0].hide()

または表示する

Ext.ComponentQuery.query('grid gridcolumn[dataIndex^="service"]')[0].show()

グリッド内の列の非表示/表示を解決する必要があります。

ここでgridはグリッドであり、idやxtypeなどです。

0
Almas