Ext.ux.touch.grid 动态加载列Column

在使用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);			
			});
		}

});