跟我一起学extjs5(21--模块Grid的多列表方案)

跟我一起学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 :