在使用Ext.ux.touch.grid展示表格的时候,我们有时希望能够在一个页面加载展示不同的表格结构,而UI样式不变。
首先想到的做法是:
1 先在View Container中定义一个touchgridpanel框架,store和column先不定义
/** * 告警系统top10 - 列表 */ Ext.define('App.view.TopTen.List', { extend : 'Ext.Container', xtype : 'topTenListCon', requires: [ 'Ext.ux.touch.grid.View', 'Ext.ux.touch.grid.List', 'Ext.ux.touch.grid.feature.Feature', 'Ext.ux.touch.grid.feature.Sorter' ], config : { title : '告警排名Top10', layout : 'vbox', scrollable : false, items : [ { scrollable : false, layout : 'hbox', height : "40px", defaults : { flex : 1, align : 'center', }, items : [ { xtype : 'selectfield', name : 'toptype', cls : "selectField", options : [ { text : '本月集团频发告警系统', value : '1' }, { text : '本月集团频发告警设备', value : '2' }], usePicker : false } ] }, { id : "topTenList", flex : 1, xtype : "touchgridpanel", store : "", } ] } });
2 通过不同的参数来确定使用不同列结构,通过topTenList.setColumn(column)来实现。
但是发现使用refresh()方法后,只是表头的内容改变了,表本身的内容也变了,但是表的结构没变,例如,第一次表是2列,第二次setColumn后,本来应该变成3列的,但是内容依旧是2列。Sencha的论坛上有人也提了这个问题,但是好像没有人给出正确答案。
于是,决定自己来搞定,翻看了grid的源代码,发现每次重新设置column后,整个内容的模板(tpl)并没有跟着刷新,这个问题应该算是个bug,不过,好说,不是不能及时刷新嘛,那么重新创建一个总可以了吧。所以,干脆把整个grid都做成动态的,在controller里动态加入到整个container里。
废话少续,上代码:
View:
/** * 告警系统top10 - 列表 */ Ext.define('App.view.TopTen.List', { extend : 'Ext.Container', xtype : 'topTenListCon', requires: [ 'Ext.ux.touch.grid.View', 'Ext.ux.touch.grid.List', 'Ext.ux.touch.grid.feature.Feature', 'Ext.ux.touch.grid.feature.Sorter' ], config : { title : '告警排名Top10', layout : 'vbox', scrollable : false, items : [ { scrollable : false, layout : 'hbox', height : "40px", defaults : { flex : 1, align : 'center', }, items : [ { xtype : 'selectfield', name : 'toptype', cls : "selectField", options : [ { text : '本月集团频发告警系统', value : '1' }, { text : '本月集团频发告警设备', value : '2' }], usePicker : false } ] }] } });
Controller:
/**
* @class App.controller.TopTenController
* @extends Ext.app.Controller
*
* Top10
*
*/
Ext.define("App.controller.TopTenController", {
extend : "Ext.app.Controller",
config : {
/**
* @private
*/
currentType : "",
currentGrid : null,
selectType:{"1":[ {
header : '排名',
dataIndex : 'POSITION',
style : 'text-align: center;',
width : '20%',
sortable : false
}, {
header : '系统',
dataIndex : 'SYS',
style : 'text-align: center;',
width : '60%',
sortable : false
}, {
header : '总数',
dataIndex : 'TOTAL',
style : 'text-align: center;',
width : '20%',
sortable : false
} ],
"2":[ {
header : '排名',
dataIndex : 'POSITION',
style : 'text-align: center;',
width : '12%',
sortable : false
}, {
header : '设备',
dataIndex : 'DEVICE',
style : 'text-align: center;',
width : '25%',
sortable : false
}, {
header : '系统',
dataIndex : 'SYS',
style : 'text-align: center;',
width : '26%',
sortable : false
}, {
header : '机房',
dataIndex : 'CROOM',
style : 'text-align: center;',
width : '25%',
sortable : false
}, {
header : '总数',
dataIndex : 'TOTAL',
style : 'text-align: center;',
width : '12%',
sortable : false
} ]
},
refs : {
topTenListCon : "topTenListCon",
toptype:"selectfield[name=toptype]",
},
control : {
topTenListCon:{
activate : "onTopTenListActivate",
},
toptype : {
change : "onToptypeChange"
}
}
},
onToptypeChange :function(field, newValue, oldValue, eOpts){
this.setCurrentType(newValue);
this.doGetData();
},
onTopTenListActivate : function(){
this.setCurrentType("1");
this.doGetData();
},
doGetData:function(){
var me=this;
var app = this.getApplication();
var topTenList=this.getTopTenListCon();
//删除之前创建的表格
if(this.getCurrentGrid()!=null)
{
topTenList.remove(this.getCurrentGrid());
}
var type=this.getCurrentType();
var url=TOP10URL[type];
var columns=this.getSelectType()[type];
//请求表格数据
app.getRequest("HeadSysList",columns, url, true, "",function(store){
//创建表格,并加入到页面中
var grid=Ext.create('Ext.ux.touch.grid.List',{store:"HeadSysList",flex : 1});
grid.setColumns(columns);
me.setCurrentGrid(grid);
topTenList.add(grid);
});
}
});