cách hiển thị/ẩn cột trong bảng điều khiển lưới extjs 3

Question

Tôi có bảng điều khiển lưới cần hiển thị/ẩn các cột trong bảng điều khiển lưới tùy thuộc vào giá trị của hộp kiểm. Nếu hộp kiểm được kiểm tra tôi cần phải hiển thị cột trong lưới và nếu nó được bỏ chọn, tôi cần phải ẩn cột trong lưới.

Đây là mã của tôi

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 }, 
    ]); 

khi tôi làm mới trang tôi không thể chuyển đổi các cột tùy thuộc vào giá trị của hộp kiểm. Nhưng khi tôi đăng nhập và đăng xuất, tôi có thể thấy những thay đổi trong bảng điều khiển lưới. Bất cứ ai có thể giúp tôi trong việc làm mới các giá trị cột trong bảng điều khiển lưới điện?

Answer 1

nếu xem xét API ExtJS, cụ thể là ColumModel có phương thức setHidden, nó sẽ ẩn/hiển thị cột trong GridPanel.

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

bạn cũng nên treo các sự kiện onchange của hộp kiểm để bạn có thể hiển thị hoặc ẩn các cột

Answer 2

Bạn có thể hiển thị ẩn cột/sử dụng trình đơn tiêu đề cột - bạn có thể chọn cột bạn muốn có được hiển thị. Dù sao, nếu bạn muốn hiển thị/ẩn một cột, hãy thử này

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

Answer 3

Trong Ext JS 4.1, để che giấu một cột, bạn sử dụng:

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

Hình như getColumnModel() với setHidden của nó () không còn là một phần của lưới: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel

Answer 4

Trong ExtJS 4 truy cập vào bảng điều khiển lưới của bạn, sau đó truy cập thuộc tính cột là một mảng đối tượng Cột.

Từ đó bạn có thể sử dụng các phương thức trình lặp mảng (http://www.diveintojavascript.com/core-javascript-reference/the-array-object) để thực hiện một hành động.

Trong ví dụ bên dưới, tôi ẩn và hiển thị một vài cột dựa trên tên tiêu đề của chúng, nhưng bạn rõ ràng có thể thực hiện hành động dựa trên bất kỳ thuộc tính Cột nào.

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); 
    } 
}); 

Answer 5

Câu trả lời ở trên tôi nghĩ là khá tốt. Nhưng hãy để tôi tư vấn cho bạn.

1) Trong ExtJS 4.x nó được khuyến khích sử dụng Ext.ComponentQuery `s phương pháp thay vì Ext.getCmp()

2) Để ẩn/hiển thị các cột của lưới bạn có thể sử dụng đoạn mã sau

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

hoặc để hiển thị

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

Cần giải quyết ẩn/hiển thị bất kỳ cột nào trong lưới.

Ở đây lưới là lưới của bạn, có thể là id hoặc xtype, v.v ...

Answer 6

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(); 
     } 
    } 

}