[英]Permanently hide column of Ext JS grid
ExtJS 5
我正在使用ExtJs 5 Grid。 我有一个按钮,当我单击它时,年龄栏将通过使用下面的行隐藏。
Ext.getCmp('grdSample').columnManager.columns[2].setVisible(false);
我正在使用侦听器-beforecellclick仅用于获取被单击列的索引。 但是,当我单击最后一列(最后一列=隐藏列旁边)时,它仍显示列的原始索引。 隐藏的列仍在网格中获得位置。
在CSS中-如果我们使用“可见性:隐藏”,则它会隐藏组件或标签,但仍会占用网页中的空间,但是如果使用display:“无”,则它会隐藏以及不会占用网页中的空间。
我希望隐藏列在获取当前单击列的索引时不应占用空间。 (不使用CSS)。
谁能帮我解决这个问题。
Ext.onReady(function () {
var studentStore = new Ext.data.JsonStore({
autoLoad: true,
pageSize: 10,
fields: ['Name', 'Age', 'Fee'],
data: {
items: [
{ "Name": 'Puneet', "Age": '25', "Fee": '1000' },
{ "Name": 'Ankit', "Age": '23', "Fee": '2000' },
{ "Name": 'Rahul', "Age": '24', "Fee": '3000' }
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
var window = new Ext.Window({
id: 'grdWindow',
width: 400,
title: 'Grid Samples',
items: [
{
xtype: 'panel',
layout: 'fit',
renderTo: Ext.getBody(),
items: [
{
xtype: 'button',
text: 'hide age column',
handler: function () {
Ext.getCmp('grdSample').columnManager.columns[2].setVisible(false);
}
},
{
xtype: 'grid',
id: 'grdSample',
height: 300,
selModel: Ext.create('Ext.selection.CheckboxModel',
{
}),
store: studentStore,
columns: [
{
header: 'Name',
dataIndex: 'Name',
},
{
header: 'Age',
dataIndex: 'Age',
},
{
header: 'Fee',
dataIndex: 'Fee'
}
],
listeners:{
beforecellclick: function (el, td, cellIndex, record, tr, rowIndex, e, eOpts) {
debugger;
}
},
dockedItems:
[
{
xtype: 'pagingtoolbar',
store:studentStore,
dock:'bottom',
displayInfo:true
}
]
}
]
}
]
});
Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{text: "Name", flex : 1, dataIndex: 'Name'},
{text: "Age", flex : 1, dataIndex: 'Age', id : 'colAge'},
{text: "Fee", flex : 1, dataIndex: 'Fee'}
],
listeners : {
'cellclick' : function (me, td, cellIndex, record, tr, rowIndex, e, eOpts ) {
me.panel.headerCt.getHeaderAtIndex(cellIndex).dataIndex)}} // here you get the correct value :)
});
这是正在工作的小提琴: http : //jsfiddle.net/Xpe9V/1623/
也许矫kill过正,但是您可以创建一个列数组
var columns= [{dataIndex: 'Name', header: 'Name'}, { dataIndex:'Age', header:
'Age' }, { dataIndex:'Fee', header: 'Fee'}]
2)然后使用javascript拼接方法按索引从数组中删除一列,然后重新配置网格
myGrid.reconfigure(myStore, columns);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.