跟我一起学extjs5(21--模块Grid的多列表方案)
跟我一起学extjs5(21--模块Grid的多列表方案)
// 模块的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就会出现的越多,这真是一个头疼的问题。
另:谁有最新的extjs5的版本发一个给我,我用的还是45天试用版的。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。