本文介绍如何在ExtJS5中实现模块Grid的多列表方案，通过实例展示了在pagingtoolbar中添加该功能，并提供了选择不同方案后的效果截图。强调在充分理解系统设计和功能后再加入此类高级特性，以确保系统的稳定性和易维护性。文章提到，随着功能增加，自定义类数量增多，对编程功底和设计能力的要求也随之提高，同时提到了ExtJS5在实际开发中可能遇到的bug问题。
跟我一起学extjs5(21--模块Grid的多列表方案)
对于有很多字段的模块在一个grid中显示所有的字段，会显得很臃肿，对于不同的用户其侧重的字段类型也不尽相同，因此就有必要为Grid的列表设计多个方案。在这个自定义系统进行设计的时候，我已经将这部分内容设计了进去，在ModuleModel.js中，在data下面有个属性
tf_gridSchemes为数组型，你有多少种方案，都定义在这个下面就可以了，然后再创建一个控件可以根据这些定义来进行方案的选择，选择好以后让grid重新配置新的方案即可。
先来看一下新增一个方案的配置信息，在ModuleModel.js中，修改tf_gridSchemes为以下内容：
// 模块的grid方案，可以定义多个方案
tf_gridSchemes : [{
tf_schemeOrder : 10,
tf_schemeName : 'Grid方案1', // 第一个grid方案
// 表头分组
tf_schemeGroups : [{
tf_gridGroupId : 1, // id号
tf_gridGroupOrder : 10, // 表头分组序号
tf_gridGroupName : '工程项目基本信息',
tf_isShowHeaderSpans : true, // 是否显示分组
tf_isLocked : true, // 是否锁定此分组
// 每一个表头分组下面的字段
tf_groupFields : [{
tf_gridFieldOrder : 5,
tf_fieldId : 10100010
// 工程id号
}, {
tf_gridFieldOrder : 10,
tf_fieldId : 10100020, // 工程项目名称字段
tf_columnWidth : 200
}, {
tf_gridFieldOrder : 20,
tf_fieldId : 10100030, // 工程项目编码字段
tf_columnWidth : 120
}]
}, {
tf_gridGroupOrder : 20, // 表头分组序号
tf_gridGroupName : '工程项目附加信息',
tf_isShowHeaderSpans : false, // 是否显示headerspan
tf_isLocked : false, // 是否锁定此分组
tf_groupFields : [{
tf_gridFieldOrder : 10,
tf_fieldId : 10100040
}, {
tf_gridFieldOrder : 20,
tf_fieldId : 10100050
}, {
tf_gridFieldOrder : 30,
tf_fieldId : 10100060
}, {
tf_gridFieldOrder : 40,
tf_fieldId : 10100070
}, {
tf_gridFieldOrder : 50,
tf_fieldId : 10100080
}, {
tf_gridFieldOrder : 60,
tf_fieldId : 10100090, // 是否通过验收
tf_columnWidth : 80
}, {
tf_gridFieldOrder : 70,
tf_fieldId : 10100100,
tf_columnWidth : -1, // －1表示这我可以撑足最大宽度
tf_autoSizeDisabled : true // 不许自动适应宽度
// 工程方量
}]
}]
}, {
tf_schemeOrder : 20,
tf_schemeName : 'Grid方案2', // 第二个grid方案
tf_schemeGroups : [{
tf_gridGroupId : 1, // id号
tf_gridGroupOrder : 10, // 表头分组序号
tf_gridGroupName : '工程项目主要信息',
tf_isShowHeaderSpans : false, // 是否显示分组
tf_isLocked : false, // 是否锁定此分组
tf_groupFields : [{
tf_gridFieldOrder : 5,
tf_fieldId : 10100010,
tf_isLocked : true
}, {
tf_gridFieldOrder : 10,
tf_fieldId : 10100020, // 工程项目名称字段
tf_columnWidth : 200,
tf_isLocked : true
}, {
tf_gridFieldOrder : 20,
tf_fieldId : 10100030, // 工程项目编码字段
tf_columnWidth : 120,
tf_isLocked : true
}, {
tf_gridFieldOrder : 10,
tf_fieldId : 10100040
}, {
tf_gridFieldOrder : 20,
tf_fieldId : 10100050
}]
}]
}, {
tf_schemeOrder : 30,
tf_schemeName : 'Grid方案3', // 第三个grid方案
// 表头分组
tf_schemeGroups : [{
tf_gridGroupId : 1, // id号
tf_gridGroupOrder : 10, // 表头分组序号
tf_gridGroupName : '工程项目基本信息',
tf_isShowHeaderSpans : true, // 是否显示分组
tf_isLocked : true, // 是否锁定此分组
tf_groupFields : [{
tf_gridFieldOrder : 10,
tf_fieldId : 10100020, // 工程项目名称字段
tf_columnWidth : 200
}, {
tf_gridFieldOrder : 20,
tf_fieldId : 10100030, // 工程项目编码字段
tf_columnWidth : 120
}]
}, {
tf_gridGroupOrder : 20, // 表头分组序号
tf_gridGroupName : '工程项目附加信息',
tf_isShowHeaderSpans : true, // 是否显示headerspan
tf_isLocked : false, // 是否锁定此分组
tf_groupFields : [{
tf_gridFieldOrder : 10,
tf_fieldId : 10100040
}, {
tf_gridFieldOrder : 20,
tf_fieldId : 10100050
}, {
tf_gridFieldOrder : 30,
tf_fieldId : 10100060
}, {
tf_gridFieldOrder : 40,
tf_fieldId : 10100070
}, {
tf_gridFieldOrder : 50,
tf_fieldId : 10100080
}]
}]
}]/**
* 如果一个模块有多个Grid方案，那么在 pading上增加一个可以选择切换方案的Combo
*/
Ext.define('app.view.module.widget.GridSchemeCombo', {
extend : 'Ext.form.field.ComboBox',
alias : 'widget.gridschemecombo',
fieldLabel : '方案',
editable : false,
labelWidth : 40,
labelAlign : 'right',
width : 200,
queryMode : 'local',
displayField : 'tf_schemeName', // data 中列表主案的名称
valueField : 'tf_schemeOrder', // data 中列表主案的序号
hidden : true, // 默认不显示，如果GridScheme的个数大于1则显示。
bind : {
hidden : '{gridSchemeHidden}', // 这是data中的一个计算字段，根据gridscheme个数来判断此控件是否显示
value : '{gridSchemeId}' // 绑定gridSchemeId的值，在grid中，也绑定此值，这里改变以后，会去执行grid中的绑定事件
},
initComponent : function() {
// 取得最顶层容器的viewModel,如果有更好的办法取得，请告知，谢谢
var viewModel = this.up('modulepanel').getViewModel();
this.store = Ext.create('Ext.data.Store', {
fields : ['tf_schemeOrder', 'tf_schemeName'],
data : viewModel.get('tf_gridSchemes')
});
this.value = viewModel.get('tf_gridSchemes')[0].tf_schemeOrder; // 默认的方案为第一个
this.callParent(arguments);
}
}); bind : {
title : '{tf_title} {selectedNames}', // 数据绑定到ModuleModel中的tf_title和选中记录的名称
gridSchemeId : '{gridSchemeId}' // 属性gridSchemeId
// 设置绑定，和GridSchemeCombo是value绑定是一样的
}, setGridSchemeId : function(value) {
if (this.gridSchemeId != value) {
this.gridSchemeId = value;
Ext.suspendLayouts();
this.columns = app.view.module.factory.ColumnsFactory.getColumns(this
.up('modulepanel').getViewModel(), value);
this.reconfigure(this.store, this.columns);
Ext.resumeLayouts(true);
this.columnAutoSize();
}
}, 在pagingtoolbar中加入此控件：
// 创建grid列
// 默认第一个grid方案
this.gridSchemeId = viewModel.get('tf_gridSchemes')[0].tf_schemeOrder;
// 将第一个方案的columns生成，第一个方案是要先设置好，并不是gridschemecombo触发来生成的
this.columns = app.view.module.factory.ColumnsFactory.getColumns(viewModel);
this.dockedItems = [{
xtype : 'gridtoolbar', // 按钮toolbar
dock : 'top',
grid : this
}, {
xtype : 'pagingtoolbar', // grid数据分页
store : this.store,
displayInfo : true,
prependButtons : true,
dock : 'bottom',
items : [{ // 在最前面加入grid方案的选择Combo
xtype : 'gridschemecombo'
}]
}];ColumnsFactory.js的前面一部分也修改过了：
/**
* 用于生成Grid的Columns的类
*/
Ext.define('app.view.module.factory.ColumnsFactory', {
statics : {
getColumns : function(moduleModel, schemeOrderId) {
var scheme = moduleModel.get('tf_gridSchemes')[0]; // 取得第一个grid的方案
if (schemeOrderId) { // 查找到相应的scheme
Ext.Array.each(moduleModel.get('tf_gridSchemes'), function(s) {
if (s.tf_schemeOrder == schemeOrderId) {
scheme = s;
return false;
}
})
}
var columns = [];为了加这个功能，改了许多处代码，又遇到了很多的bug，大家在切换方案的时候就会看到bug了。经过以上的操作，在模块打开的时候，可以看到在pagingtoolbar上多了一个控件，可以选择来改变grid的column方案了。这个改变方案的步骤也是应用MVVM的特性，上面的代码中没有看到事件的执行代码，因为事件在bind后是自动去执行的。
下面贴一下加入此功能后的截图。
选择了第二个方案后
选择了第三个方案后
对于一个管理系统来说，你的grid有以上几节所写的功能，系统的档次立马提高不少。但是在你没有理解的情况下不要盲目加入，要对系统的设计到功能的内部操作过程都了解了再加入相应功能。这套自定义的系统中完全没有重复的界面类，每一个类都是为了完成新的功能而建立的，到现在这节为止是手工建立了20多个类来协同工作，内部流程已经非常复杂了。等这个系统完全做好，前台会有200多个自定义类，后台也有几百个控制类，没有一定的编程功底和设计能力的话就很难掌控。再加上功能越深入，extjs的bug就会出现的越多，这真是一个头疼的问题。
Grid的操作暂时告一段落，从下面会开始加入自定义Form、自定义图表的开发过程。
另：谁有最新的extjs5的版本发一个给我，我用的还是45天试用版的。
扫一扫
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
