跟我一起学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; } } });
/** * 用于生成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字段等等,我如今的这个解说仅仅提供一个自己定义的思路,有很多其它想法还要自己去实现。