[英]how to show/hide column in a extjs 3.4 grid panel
I've gone through the previous posts of the same question and none of them couldn't solve my problem. 我已经看过同一个问题的先前帖子,但没有一个不能解决我的问题。 I have a grid panel with a specific column as hidden. 我有一个带有隐藏的特定列的网格面板。 I need to show that column when a combobox selection changes. 当组合框选择更改时,我需要显示该列。
Here is my code 这是我的代码
Store1 = new Ext.data.JsonStore({
url: 'url',
root: 'rows',
autoLoad: true,
fields: ['field1', 'field2']
});
Grid1 =
{
xtype: 'grid',
id: 'grid1',
autoHeight: true,
autoWidth: true,
autoScroll: true,
border: false,
trackMouseOver: false,
frame: true,
store: Store1,
columns: [
{ header: 'Col1', dataIndex: 'field1'},
{ header: 'Col2', dataIndex: 'field2',
renderer: function (value, metaData, record, rowIndex, colIndex, store) {
if (isShow==true) {
value = 100;
}
else {
hideCols(Ext.getCmp('grid1'));
}
return value;
}}
]};
xtype: 'combo',
store: comboStore,
fieldLabel: 'title',
displayField: 'title',
valueField: 'title',
typeAhead: false,
editable: false,
allowBlank: false,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
name: 'combo1',
selectOnFocus: true
, onSelect: function (cmb) {
isShow = true;
showCols(Ext.getCmp('grid1'));
}
// methods
hideCols = function (grid) {
grid.getColumnModel().setHidden(grid.getColumnModel().findColumnIndex('filed2'), true);
};
showCols = function (grid) { grid.getColumnModel().setHidden(grid.getColumnModel().findColumnIndex('filed2'), false);
};
Where I went wrong? 我哪里出问题了?
A typo in the word "filed2": grid.getColumnModel().findColumnIndex('filed2')
单词“ filed2”中的错字: grid.getColumnModel().findColumnIndex('filed2')
Some recomendations: 一些建议:
hidden:true
. 如果您不希望在启动时显示列,请使用column属性hidden:true
。 Not change visibility in renderer, it has low performance. 无法在渲染器中更改可见性,它的性能较低。 Your column config will be: 您的列配置将是:
{
header: 'Col2',
dataIndex: 'field2',
hidden: true,
renderer: function (value, metaData, record, rowIndex, colIndex, store) {
return 100;
}
}
onSelect
property, it is private method. 不要使用onSelect
属性,它是私有方法。 Use event subscribe: 使用事件订阅:
name: 'combo1',
selectOnFocus: true,
listeners: {
select: function(cmb){
showCols(Ext.getCmp('grid1'));
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.