我正在尝试在 Ext JS 网格中创建“展开/折叠”列的效果。为此,我想在列名称旁边添加一个图标/按钮,这样当有人单击它时,它的子列要么被隐藏,要么被显示。
我创建了一个小提琴(代码也粘贴在下面),它显示了我希望我的网格如何表现:http: //jsfiddle.net/a1umupea/
在我的解决方案中,我创建了一个链接,该链接调用了一个操纵网格的 javascript 函数。
有没有更好的方法来使用 Ext JS 4.2 来实现这一点,而不是编写一个单独的 javascript 函数?
Ext.onReady(function () {
Ext.create('Ext.data.Store', {
storeId: 'fruitStore',
fields: ['name', 'Total', 'Apple', 'Banana', 'Orange'],
data: {
'items': [{
'name': 'Lisa',
"Total": "5",
"Apple": "3",
"Banana": "1",
"Orange": "1"
}, {
'name': 'Bart',
"Total": "10",
"Apple": "5",
"Banana": "2",
"Orange": "3"
}, {
'name': 'Homer',
"Total": "15",
"Apple": "5",
"Banana": "5",
"Orange": "5"
}, {
'name': 'Marge',
"Total": "15",
"Apple": "10",
"Banana": "3",
"Orange": "2"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Fruits',
id: 'fruitGrid',
layout:'fit',
store: Ext.data.StoreManager.lookup('fruitStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: '<a href="#" onclick="toggle(this)">[+]</a> Fruits',
columns:[
{
text: 'Total',
dataIndex: 'Total'
},
{
text: 'Apple',
dataIndex: 'Apple',
hidden:true
},
{
text: 'Banana',
dataIndex: 'Banana',
hidden:true
},
{
text: 'Orange',
dataIndex: 'Orange',
hidden:true
}
]
}
],
height: 300,
width: 500,
renderTo: Ext.getBody()
});
});
function toggle(t){
var grid = Ext.getCmp('fruitGrid');
console.log(grid);
for(var i = 0 ; i < grid.headerCt.gridDataColumns.length ; i++){
var col = grid.headerCt.gridDataColumns[i];
if (col.text == 'Apple' || col.text=='Banana' || col.text=='Orange'){
if(col.isVisible()) col.setVisible(false);
else col.setVisible(true);
}
}
if(t.text.indexOf('+') != -1){
t.text=t.text.replace('+','-');
}
else
t.text=t.text.replace('-','+');
}