跟我一起学extjs5(24--模块Form的自己定义的设计[2])

跟我一起学extjs5(24--模块Form的自己定义的设计[2])

        在本节中将要增加各种类型的字段，在增加字段的时候因为能够一行增加多个字段，因此层次结构又多了一层fieldcontainer。form里面的主要层次结构例如以下： form -- fieldSet -- fieldcontainer -- field。

        如今增加fieldcontainer的生成器的文件，在factory中增加文件FieldContainerFactory.js

/**
 * 字段容器factory
 */
Ext.define('app.view.module.factory.FieldContainerFactory', {

	statics : {

		getContainer : function(container, module, formtype) {

			var result = {
				xtype : 'fieldcontainer',
				layout : 'hbox',
				margin : '0 0 0 0',
				items : []
			};
			for (var i in container) {
				var field = container[i];
				// 假设是空的位置
				if (field.spacer) {
					result.items.push({
								xtype : 'fieldcontainer',
								layout : 'anchor',
								margin : '0 0 0 0',
								flex : field.flex
							});
				} else {
					var fieldDefine = module.getFieldDefine(field.tf_fieldId);

					var f = app.view.module.factory.FormFieldFactory.getField(fieldDefine,
							field, formtype, module);

					var c = {
						xtype : 'fieldcontainer',
						layout : (  f.moduleName )
								? (field.tf_width != -1 ? 'table' : 'hbox')
								: 'anchor',
						flex : field.tf_colspan,
						items : []
					};
					if (c.layout == 'hbox')
						c.margin = '0 0 5 0';
					c.items.push(f);

					result.items.push(c);
				}
			}
			return result;
		}
	}
});

如今要增加最后一个field的生成器，FormFieldFactory.js，此文件敢放在factory文件夹之下。

/**
 * 用于生成form中的每个field
 */

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

	statics : {
		labelDefaultWidth : 92,
		dateDefaultSize : 14,
		integerDefaultSize : 10,
		moneyDefaultSize : 14,
		/**
		 * 依据module定义,formField的定义,formtype来返回一个field的定义
		 */
		getField : function(fieldDefine, formField, formtype, module) {

			var field = {
				name : fieldDefine.tf_fieldName,
				fieldLabel : formField.fieldLabel
						|| (formField.labelAhead ? formField.labelAhead : '')
						+ fieldDefine.tf_title.replace(new RegExp('--', 'gm'), ''),
				labelAlign : formField.labelAlign || 'right',
				labelWidth : formField.labelWidth || this.labelDefaultWidth,
				behindText : formField.behindText || fieldDefine.behindText
			};
			if (field.behindText && field.behindText == ' ')
				delete field.behindText;

			if (formField.labelWidth)
				field.labelWidth = formField.labelWidth;
			if (formField.hideLabel)
				field.hideLabel = true;
			// 假设是隐藏字段
			if (this.getIsHidden(fieldDefine, formField)) {
				Ext.apply(field, {
							xtype : 'hiddenfield'
						});
				return field;
			}

			Ext.apply(field, this.getFieldXType(fieldDefine, field));
			if (formField.tf_width == -1) {
				delete field.size;
				field.anchor = '100%';
			}

			// 是否是必添字段
			if (fieldDefine.tf_isRequired)
				Ext.apply(field, {
							allowBlank : false
						});

			return field;
		},

		/**
		 * 推断字段类型
		 */
		getFieldXType : function(fieldDefine, field) {

				switch (fieldDefine.tf_fieldType) {
					case 'Date' :
						return {
							size : this.dateDefaultSize,
							format : 'Y-m-d',
							xtype : 'datefield',
							submitFormat : 'Y-m-d'
						}
					case 'Datetime' :
						return {
							size : this.dateDefaultSize,
							format : 'Y-m-d H:i:s',
							xtype : 'datetimefield'
						}
					case 'Boolean' :
						return {
							xtype : 'checkboxfield',
							inputValue : 'true'
						};
					case 'Integer' :
						return {
							minValue : -9999999999,
							maxValue : 9999999999,
							fieldStyle : "text-align:right",
							size : this.integerDefaultSize,
							xtype : 'numberfield',
							enableKeyEvents : true,
							listeners : {
								keydown : function(field, e, eOpts) {
									if (e.getKey() == Ext.EventObject.ENTER) {
										var f = field.nextSibling('field[readOnly=false]');
										if (!!f)
											f.focus();
										return false;
									}
								}
							}
						};
					case 'Double' :
						return {
							size : this.moneyDefaultSize,
							hideTrigger : true,
							xtype : 'numberfield',
							behindText : '元'

						};
					case 'Float' :
						return {
							minValue : -9999999999,
							maxValue : 9999999999,
							size : this.moneyDefaultSize,
							hideTrigger : true,
							xtype : 'numberfield'
						};
					case 'Percent' :
						return {
							size : this.moneyDefaultSize,
							xtype : 'numberfield',
							// behindText : '%',
							percent : true
						};
					case 'String' :
						var len = fieldDefine.l;
						if (len == 0 || len > 100)
							return {
								maxLength : len == 0 ? Number.MAX_VALUE : len,
								enforceMaxLength : true,
								anchor : '100%',
								grow : true,
								growMax : 200,
								growMin : 40,
								xtype : 'textareafield'
							}
						else
							return {
								maxLength : len,
								size : len,
								enforceMaxLength : true,
								xtype : 'textfield',
								enableKeyEvents : true,
								listeners : {
									keydown : function(field, e, eOpts) {
										if (e.getKey() == Ext.EventObject.ENTER) {
											var f = field.nextSibling('field[readOnly=false]');
											if (!!f)
												f.focus();
											return false;
										}
									}
								}
							};

				}
		},

		/**
		 * 推断是否是hidden字段
		 */
		getIsHidden : function(fieldDefine, formField) {
			return (fieldDefine.tf_isHidden || formField.tf_isHidden)
		}
	}
});

上面的字段生成factory中省略了combo和选择父级字段属性的操作，仅仅生成字符型，数值型，布尔型和日期型的内容。

        如今还要改动一下fieldSet.js中的内容，使其增加FieldContainer，文件又一次公布一下：

/**
 *
 * 生成form中的一个fieldSet的类
 *
 */
Ext.define('app.view.module.form.FieldSet', {
			extend : 'Ext.form.FieldSet',
			alias : 'widget.formfieldset',

			requires : ['app.view.module.factory.FieldContainerFactory',
					'app.view.module.factory.FormFieldFactory'],

			defaultType : 'textfield',
			defaults : {},
			layout : 'anchor',
			config : {
				module : undefined, //  此模块的module定义
				schemeGroup : undefined, // 定义了此fieldSet的属性以及以下须要加的字段
				numCols : undefined,
				formtype : undefined
			},

			initComponent : function() {
				this.title = this.schemeGroup.tf_formGroupName;
				this.collapsible = this.schemeGroup.tf_collapsible;
				this.collapsed = this.schemeGroup.tf_collapsed;

				this.items = [];

				var containers = []; // 要计算一下有多少个container，假设col=2,那么二个一换行，或者指定换行
				var hiddens = []; // 隐藏的字段
				var container = [];
				var c = 0;

				for (var i in this.schemeGroup.tf_groupFields) {
					var field = this.schemeGroup.tf_groupFields[i];
					var fieldDefine = this.getViewModel()
							.getFieldDefine(field.tf_fieldId);
					// 假设是隐藏字段，那么就直接放在隐藏字段的数组里
					if (fieldDefine && fieldDefine.tf_isHidden) {
						hiddens.push(field);
						continue;
					}
				}

				for (var i in this.schemeGroup.tf_groupFields) {
					var field = this.schemeGroup.tf_groupFields[i];
					var fieldDefine = this.getViewModel()
							.getFieldDefine(field.tf_fieldId);
					if (fieldDefine && fieldDefine.tf_isHidden) {
						continue;
					}
					// 设置tf_colspan假设是0，那么置为1，假设大于tf_colspan,置为tf_colspan
					field.tf_colspan = field.tf_colspan ? field.tf_colspan : 1;
					if (field.tf_colspan > this.numCols)
						field.tf_colspan = this.numCols;
					// 假设加上这一行，超出了numCols,那么就要分二行了
					if (c + field.tf_colspan > this.numCols) {
						if (this.numCols - c > 0)
							container.push({
										spacer : true,
										flex : this.numCols - c
									});
						containers.push(container);
						container = [];
						container.push(field);
						c = field.tf_colspan;
					} else {
						container.push(field);
						c += field.tf_colspan;
						if (c >= this.numCols || field.tf_isEndRow) {
							if (this.numCols - c > 0)
								container.push({
											spacer : true,
											flex : this.numCols - c
										});
							c = 0;
							containers.push(container);
							container = [];
						}
					}
				}
				if (container.length > 0)
					containers.push(container);
				// 生成每个container ，一个container中能够放置若干个字段，假设分栏是3,那就放3个
				for (var i in containers) {
					this.items.push(app.view.module.factory.FieldContainerFactory
							.getContainer(containers[i], this.getViewModel(), this.formtype));
				}

				// 增加隐藏的字段
				for (var i in hiddens) {
					var field = hiddens[i];
					var fieldDefine = this.module.getFieldDefine(field.tf_fieldId);
					var f = app.view.module.factory.FormFieldFactory.getField(
							fieldDefine, field, this.formtype);
					this.items.push(f);
				}

				this.callParent(arguments);
			}
		})

BaseForm.js中也对buttons又一次定义一下，增加了一个保存按钮。

				this.buttons.push({
							text : '保存',
							itemId : 'save',
							glyph : 0xf0c7
						},{
							text : '关闭',
							itemId : 'close',
							glyph : 0xf148,
							handler : function(button){
								button.up('window').hide();
							}
						});

ModuleController.js中的editRecord事件的处理函数也改动，添加了调用当前选中Grid中记录的函数。

	editRecord : function(button) {
		var window = Ext.widget('basewindow', {
					viewModel : this.getView().getViewModel()
				});
		window.down('baseform').setData(this.getView().down('modulegrid')
				.getSelectionModel().getSelection()[0]);
		window.show();
	},

经过以上步骤，能够看到一个改动form的窗体例如以下，窗体的高度是自己主动适应的。

        至此，一个依据form參数自己定义的基本界面搭建完毕了。对于简单的应用这样搭建已经足够了，对于复杂的field的配置，你能够把他描写叙述成属性值的配置，然后再入解释运行的代码，这样你能够完毕很多其它的定制功能。比方说如今的字段建筑面积后面的“平米”怎样增加，怎样增加各种类型的combo字段等等，我如今的这个解说仅仅提供一个自己定义的思路，有很多其它想法还要自己去实现。