码迷,mamicode.com
首页 > Web开发 > 详细

跟我一起学extjs5(14--模块字段和Grid列的定义[1])

时间:2014-07-12 23:48:06      阅读:288      评论:0      收藏:0      [点我收藏+]

标签:extjs5   sencha   开发经验   

跟我一起学extjs5(14--模块字段和Grid列的定义[1])

        这一节加入模块自定义字段,并根据这些字段生成model。然后再定义grid中的分组和列。从这一切开始真正进入到了模块自定义的节奏当中,代码的复杂度和技巧性也大大提高。先从模块字段的自定义开始。先看一下ModuleModel.js中加入的新的定义:

/**
 * 模块的数据模型
 */

Ext.define('app.view.module.ModuleModel', {
			extend : 'Ext.app.ViewModel',
			alias : 'viewmodel.module',

			// 在开发过程中我先用设定好的值放于data中,等以后自定义的时候,data里的值都是从后台取得的
			// 所有数据库里的字段,我都以tf_开头,只是为了表示这是从后台读取过来的

			data : {

				tf_moduleId : '1010', // 模块ID号:一个数字的ID号,可以根据此ID号的顺序将相同分组的模块放在一块。
				tf_ModuleGroup : '工程管理',// 模块分组:模块分到哪个组里,比如说业务模块1、业务模块2、系统设置、系统管理等。
				tf_moduleName : 'Global', // 模块标识:系统中唯一的模块的标识
				tf_title : '工程项目',// 模块名称:能够描述此模块信息的名称。
				tf_glyph : 0xf0f7, // 图标字符值
				tf_shortname : null,// 模块简称:如果名称过长,有些地方可以用简称来代替。
				tf_englishName : null,// 模块英文名称:万一要制作英文版,可以用英文名称。
				tf_englishShortName : null, // 模块英文简称:可以用作生成编码字段。
				tf_description : null,// 模块描述:
				tf_remark : null,
				// 备注:

				// 下面还有若干字段未加入,以后用到的时候再加入
				tf_primaryKey : 'tf_id', // 主键
				tf_nameFields : 'tf_name', // 可用于描述记录的字段

				// 此模块的自定义字段,此处先用手工定义,以后换成从数据库中自动取得
				tf_fields : [{
					tf_fieldId : 10100010, // 此字段的id值,所有的字段都是保存在一字段表中,这是主键值
					tf_fieldName : 'tf_id',// 字段名
					tf_title : '序号',// 字段描述
					tf_fieldType : 'Integer', // 字段类型
					tf_isHidden : true, // 是否是隐藏字段
					tf_fieldGroup : '工程基本信息' // 字段分组
						// 是否是隐藏字段
					}, {
					tf_fieldId : 10100020,
					tf_fieldName : 'tf_name',
					tf_title : '工程项目名称',
					tf_fieldType : 'String',
					tf_fieldLen : 50,
					tf_isRequired : true, // 是否是必添项
					tf_fieldGroup : '工程基本信息'

				}, {
					tf_fieldId : 10100030,
					tf_fieldName : 'tf_code',
					tf_title : '工程项目编码',
					tf_fieldType : 'String',
					tf_fieldLen : 20,
					tf_isRequired : true,
					tf_fieldGroup : '工程基本信息' // 字段分组

				}, {
					tf_fieldId : 10100040, // 加入一个整型字段
					tf_fieldName : 'tf_squaremeter',
					tf_title : '建筑面积',
					tf_fieldType : 'Integer',
					tf_unitText : '平米', // 字段单位
					tf_fieldGroup : '工程附加信息',
					tf_allowSummary : true
						// 可以对此字段进行小计
					}, {
					tf_fieldId : 10100050, // 加入一个金额字段
					tf_fieldName : 'tf_budget',
					tf_title : '投资总额',
					tf_fieldType : 'Double',
					tf_isMoney : true, // 此字段是一个金额字段
					tf_fieldGroup : '工程附加信息',
					tf_allowSummary : true
				}, {
					tf_fieldId : 10100060, // 加入一个百分比字段
					tf_fieldName : 'tf_rjl',
					tf_title : '容积率',
					tf_fieldType : 'Percent',
					tf_fieldGroup : '工程附加信息'
				}, {
					tf_fieldId : 10100070, // 加入一个日期
					tf_fieldName : 'tf_startDate',
					tf_title : '计划开工时间',
					tf_fieldType : 'Date',
					tf_fieldGroup : '工程附加信息'
				}, {
					tf_fieldId : 10100080, // 加入一个日期
					tf_fieldName : 'tf_endDate',
					tf_title : '计划竣工时间',
					tf_fieldType : 'Date',
					tf_fieldGroup : '工程附加信息'
				}, {
					tf_fieldId : 10100090, // 加入一个布尔字段
					tf_fieldName : 'tf_isValid',
					tf_title : '是否通过验收',
					tf_fieldType : 'Boolean',
					tf_fieldGroup : '工程附加信息'
				}, {
					tf_fieldId : 10100100, // 加入一个数值字段
					tf_fieldName : 'tf_m3',
					tf_title : '工程方量',
					tf_fieldType : 'Double',
					tf_fieldGroup : '工程附加信息'
				}],

				// 模块的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 : 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
													// 计划竣工时间
											}	, {
													tf_gridFieldOrder : 60,
													tf_fieldId : 10100090, // 是否通过验收
													tf_columnWidth : 80
												}, {
													tf_gridFieldOrder : 70,
													tf_fieldId : 10100100
													// 工程方量
											}]
									}]

						}]

			},

			// 根据字段id,找到字段相应的定义
			getFieldDefine : function(fieldId) {
				var result = null;
				Ext.Array.each(this.data.tf_fields, function(field) {
							if (field.tf_fieldId == fieldId) {
								result = field;
								return false;
							}
						});
				return result;
			}

		})
        
        在上面代码中在data里面加入了tf_fields这个数组,这个数组下的每个元素都是一个字段,比如:
{
					tf_fieldId : 10100020,
					tf_fieldName : 'tf_name',
					tf_title : '工程项目名称',
					tf_fieldType : 'String',
					tf_fieldLen : 50,
					tf_isRequired : true, // 是否是必添项
					tf_fieldGroup : '工程基本信息'

				}
        上面就定义了一个工程项目名称的字段,包括id号,字段名称,类型,长度,是否是必添项,分组信息等等。在这个工程项目模块中,我加入了各种类型的字段,有字符型,整型,浮点型,金额型,日期型,布尔型,都可以演示了看看效果。
        字段定义好了以后,需要能够根据字段的定义自动生成model。下面我编了一个model工厂的类,能根据ModuleModel中的定义自动生成一个model。先在module目录下面建立一个新的目录factory ,然后在这个下面建立一个文件 ModelFactory.js,内容如下:

/**
 * 根据module的数据来生成模块的model
 */
Ext.define('app.view.module.factory.ModelFactory', {
			// 静态变量或函数
			statics : {
				// 生成module的model,传入的数据是ModelModel中的data
				getModelByModule : function(moduleModel) {
					console.log('moduleModel');
					console.log(moduleModel);
					var module = moduleModel.data;
					return Ext.define('app.model.' + module.tf_moduleName, {
								extend : 'Ext.data.Model',
								module : module,
								idProperty : module.tf_primaryKey, // 设置模块model的主键
								nameFields : module.tf_nameFields, // 设置模块model的名称字段
								fields : this.getFields(module), // 设置字段

								// 取得主键值
								getIdValue : function() {
									return this.get(this.idProperty);
								},

								// 取得当前记录的名字字段
								getNameValue : function() {
									if (this.nameFields)
										return this.get(this.nameFields);
									else
										return null;
								}
							});
				},

				// 根据字段字义数组来生成model中的各个字段
				getFields : function(module) {
					var fields = [];

					for (var i in module.tf_fields) {
						var fd = module.tf_fields[i];
						var field = {
							name : fd.tf_fieldName,
							title : fd.tf_title,
							type : this.getTypeByStr(fd.tf_fieldType)
						};
						if (field.type == 'string') {
							field.useNull = true;
							field.serialize = this.convertToNull;
						}
						if (field.type == 'date') {
							field.dateWriteFormat = 'Y-m-d'; // 设置日期字段的读写格式
							field.dateReadFormat = 'Y-m-d';
						}
						if (field.type == 'datetime')
							field.dateReadFormat = 'Y-m-d H:i:s';
						fields.push(field);
					}
					return fields;
				},
				// 将java中的数据类型转换成extjs5的字段类型
				getTypeByStr : function(str) {
					switch (str) {
						case 'String' :
							return 'string';
						case 'Boolean' :
							return 'boolean';
						case 'Integer' :
							return 'int';
						case 'Date' :
							return 'date';
						case 'Datetime' :
							return 'date';
						case 'Double' :
						case 'Float' :
						case 'Percent' :
							return 'float';
						default :
							return 'string';
					}
				},

				// 如果是空字符串,返回null
				convertToNull : function(v) {
					return v ? v : null;
				}
			}
		});

        上面是生成model的一个类。下面再继续看最上面的ModuleModel.js中data下的另一个属性:tf_gridSchemes,这个属性下的数据是用来定义grid的分组和列,tf_schemeGroups 是定义了若干个分组,tf_groupFields定义这些分组下面的具体的列。这些数据以后也都是保存在数据库中的,只要建立三张表,一张放方案名称,一张放分组名牌,一张放分组下面的字段定义。对表进行修改,就能把数据传给前台,重新展示就是新的一个grid的列方案。并且方案可以制订多个,在界面中方全的切换。
        下面的任务就是要为grid 生成columns,与上面生成model的方法相同,建立一个ColumnFactory.js程序,用来根据配置文件生成columns。

/**
 * 用于生成Grid的Columns的类
 */

Ext.define('app.view.module.factory.ColumnsFactory', {

			statics : {
				getColumns : function(moduleModel, schemeOrderId) {

					var scheme = moduleModel.get('tf_gridSchemes')[0]; // 取得第一个grid的方案
					var columns = [];
					for (var i in scheme.tf_schemeGroups) {
						var sg = scheme.tf_schemeGroups[i];
						// 是否需要显示分组
						var isgroup = sg.tf_isShowHeaderSpans;
						var group = {
							gridGroupId : sg.tf_gridGroupId,
							text : sg.tf_gridGroupName,
							locked : sg.tf_isLocked,
							//flex : 1,
							columns : []
						}
						for (var j in sg.tf_groupFields) {
							var gf = sg.tf_groupFields[j];
							var fd = moduleModel.getFieldDefine(gf.tf_fieldId);
							var field;
							if (fd.tf_isHidden)
								continue;
							field = this.getColumn(gf, fd, moduleModel);
							field.locked = sg.tf_isLocked;
							if (isgroup) {
								this.canReduceTitle(group, field);
								group.columns.push(field);
							} else
								columns.push(field);
						}
						if (isgroup) {
							this.canReduceTitle(group, field);
							columns.push(group);
						}
					}
					console.log(columns);
					return columns;
				},

				// 看看分组名称是不是 下面column 的开头,如果是开头的话,并且columntitle 后面有内容,就把
				// 相同的部分截掉
				canReduceTitle : function(group, field) {
					if (field.text.indexOf(group.text) == 0) {
						field.text = field.text.slice(group.text.length).replace('(', '')
								.replace(')', '').replace('(', '').replace(')', '');
						if (field.text.indexOf("<br/>") == 0)
							field.text = field.text.slice(5);
					}
				},

				/**
				 * 根据groupField,fieldDefine的定义,生成一个column的定义
				 */
				getColumn : function(gf, fd, module) {

					// console.log(fd);
					var ft = fd.tf_title.replace(new RegExp('--', 'gm'), '<br/>');
					if (fd.behindText)
						ft += '<br/>(' + fd.behindText + ')';

					var field = {
						filter : {},
						maxWidth : 800,
						gridFieldId : gf.tf_gridFieldId, // 加上这个属性,用于在列改变了宽度过后,传到后台
						sortable : true,
						text : ft,
						dataIndex : fd.tf_fieldName
					}

					switch (fd.tf_fieldType) {
						case 'Date' :
							Ext.apply(field, {
										xtype : 'datecolumn',
										align : 'center',
										width : 100
									});
							break;

						case 'Datetime' :
							Ext.apply(field, {
										xtype : 'datecolumn',
										align : 'center',
										width : 130
									});
							break;

						case 'Boolean' :
							field.xtype = 'checkcolumn';
							field.stopSelection = false;
							field.processEvent = function(type) {
								if (type == 'click')
									return false;
							};
							break;
						case 'Integer' :
							Ext.apply(field, {
										align : 'center',
										xtype : 'numbercolumn',
										tdCls : 'intcolor',
										format : '#'
									});
							break;
						case 'Double' :
							Ext.apply(field, {
										align : 'center',
										xtype : 'numbercolumn',
										width : 110
									});
							break;
						case 'Float' :
							Ext.apply(field, {
										align : 'center',
										xtype : 'numbercolumn',
										width : 110
									});
							break;
						case 'Percent' :
							Ext.apply(field, {
										align : 'center',
										xtype : 'numbercolumn',
										width : 110
									})
							break;
						case 'String' :
						
							break;
						default :
							break;
					}
					if (fd.tf_allowSummary) {
						Ext.apply(field, {
									hasSummary : true,
									summaryType : 'sum'
								})
					}

					if (gf.tf_columnWidth > 0)
						field.width = gf.tf_columnWidth;
					else if (gf.tf_columnWidth == -1) {
						field.flex = 1;
						field.minWidth = 120;
					}
					return field;
				},

				/**
				 * 对于当前模块的name字段,加粗显示
				 */

				nameFieldRenderer : function(val, rd, model, row, col, store, gridview) {
					return filterTextSetBk(store, '<strong>' + val + '</strong>');
				}
			}
		});

        文件的结构:

bubuko.com,布布扣






跟我一起学extjs5(14--模块字段和Grid列的定义[1]),布布扣,bubuko.com

跟我一起学extjs5(14--模块字段和Grid列的定义[1])

标签:extjs5   sencha   开发经验   

原文地址:http://blog.csdn.net/jfok/article/details/37694837

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!