扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
需求:用ExtJS5.1.2制作以下Grid效果(其中列3是动态的):
ExtJS3的实现方式和5不一样。
基本代码:
为了实现双表头,需要嵌套columns。
{
id : 'grid1',
xtype : 'grid'
columns : [{
header : '列1',
xtype : 'gridcolumn'
}, {
header : '列2',
xtype : 'gridcolumn'
}, {
header : '列3',
xtype : 'gridcolumn',
columns : [{
header : '列3-1',
xtype : 'gridcolumn'
} , {
header : '列3-2',
xtype : 'gridcolumn'
}, {
header : '列3-3',
xtype : 'gridcolumn'
}]
}]
}
解决思路:
先显示所有动态列,然后隐藏。
--> 失败,使用Ext.getCmp(id).hide()或者show()会导致页面无响应。这个方法在单表头的时候没有问题。
先全部按单列(不嵌套columns)显示,然后使用hide()隐藏不需要的列,再合并第一行表头。
--> 目前没有找到实现方法。
var columnList = [];
columns.push({
header : '列3-1',
xtype : 'gridcolumn'
}, {
header : '列3-2',
xtype : 'gridcolumn'
}, {
header : '列3-3',
xtype : 'gridcolumn'
});
var grid = Ext.getCmp('grid1');
grid.columnManager.secondHeaderCt.add(
xtype : 'gridcolumn',
header : '列3',
columns : columnList
);
ExtJS并不建议使用Ext.grid.ColumnManager,官方API也找不到grid.columnManager.secondHeaderCt,可以通过Chrome/F12/Console/输入“Ext.getCmp('grid').columnManager”找到secondHeaderCt。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流