Learn Extjs5 with me. (24--module form custom design [2])

Learn Extjs5 with me. (24--module form custom design [2])in this section, you will join various types of fields, and when you join a field you can add multiple fields to a row, so the hierarchy is one more layerFieldcontainer. The main hierarchies within the form are as follows:form--fieldset--fieldcontainer--field. now join the Fieldcontainer generator file and add the file in the factoryFieldcontainerfactory.js

/** * Field Container 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 (v Ar i in container) {var field = container[i];//If empty position if (field.spacer) {Result.items.push ({xtype: ' Fieldcontainer ', Layo UT: ' 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;}});

Now to join the last field generator, Formfieldfactory.js, this file will be placed under the factory directory.

/** * is used to generate each field */ext.define (' App.view.module.factory.FormFieldFactory ', {statics: {labeldefaultwidth:92) in a form, datedefaultsize:14,integerdefaultsize:10,moneydefaultsize:14,/** * According to the module definition, the definition of FormField, formtype to return the definition of a 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 it is a hidden field 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% ';} Is the required field if (fielddefine.tf_isrequired) ext.apply (field, {allowblank:false}); return field;},/** * Determine field type */ Getfieldxtype:function (fielddefine, field) {switch (fielddefine.tf_fieldtype) {case ' Date ': return {SIZE:THIS.DATEDEF Aultsize,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] '); f) F.focus (); return false;}}}; Case ' Double ': return {size:this.moneydefaultsize,hidetrigger:true,xtype: ' NumbeRfield ', Behindtext: ' Yuan '};case ' Float ': return {minValue: -9999999999,maxvalue:9999999999,size:this.moneydefaultsize , Hidetrigger:true,xtype: ' Numberfield '};case ' Percent ': return {size:this.moneydefaultsize,xtype: ' Numberfield ',//b Ehindtext: '% ', percent:true};case ' String ': var len = fielddefine.l;if (len = = 0 | | Len >) return {maxlength:le n = = 0? Number.max_value:len,enforcemaxlength:true,anchor: ' 100% ', Grow:true,growmax:200,growmin:40,xtype: ' Textareafie LD '}elsereturn {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;}}}};}},/** * Determine if the hidden field */getishidden:function (Fielddefine, FormField) {return ( Fielddefine.tf_ishidden | | Formfield.tf_ishidden)}});

The above field generates factory that omit the combo and select the parent field property, generating only the character, numeric, Boolean, and date-based content.
now also modify the content in the fieldset.js, so that it joins the Fieldcontainer, the file re-published:

/** * * Generate a FieldSet class in form * */ext.define (' App.view.module.form.FieldSet ', {extend: ' Ext.form.FieldSet ', alias: ' WIDG Et.formfieldset ', requires: [' app.view.module.factory.FieldContainerFactory ', ' App.view.module.factory.FormFieldFactory '],defaulttype: ' TextField ', defaults: {},layout: ' anchor ', config: {module: Undefined,//  module definition schemegroup:undefined,//Defines the properties of this fieldset and the fields to be added below 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 = []; To calculate how many container, if col=2, then two a newline, or specify the line break var hiddens = []; hidden field var container = [];var c = 0;for (var i in this.schemeGroup.tf_groupFields) {var field = This.schemeGroup.tf_group Fields[i];var fielddefine = This.getviewmodel (). Getfielddefine (Field.tf_fieldid);//If it is a hidden field, place it directly in the array of hidden fields 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.get ViewModel (). Getfielddefine (Field.tf_fieldid); if (Fielddefine && Fielddefine.tf_ishidden) {continue;} Setting Tf_colspan if 0, then set to 1, if it is greater than tf_colspan, Tf_colspanfield.tf_colspan = Field.tf_colspan? Field.tf_colspan:1;if (Field.tf_colspan > This.numcols) field.tf_colspan = this.numcols;//If this line is added, the numCols is exceeded, Then it's going to be two lines. 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);//Generate each container, a COntainer can be placed in several fields, if the column is 3, then put 3 for (var i in containers) {This.items.push ( App.view.module.factory.FieldContainerFactory.getContainer (Containers[i], This.getviewmodel (), This.formtype));} Add hidden field for (var i in Hiddens) {var field = Hiddens[i];var Fielddefine = this.module.getFieldDefine (field.tf_fieldid); VA R f = App.view.module.factory.FormFieldFactory.getField (fielddefine, field, This.formtype); This.items.push (f);} This.callparent (arguments);}})

Baseform.js also redefined the buttons, adding a Save button.

This.buttons.push ({text: ' Saved ', itemId: ' Save ', Glyph:0xf0c7},{text: ' Off ', ItemId: ' Close ', glyph:0xf148,handler:func tion (button) {button.up (' window '). Hide ();}});

The handler function for the EditRecord event in Modulecontroller.js is also modified to add a function that calls the record in the currently selected 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 ();},

After the above steps, you can see a window to modify the form as follows, the height of the window is automatically adapted.


at this point, a basic interface based on the form parameter customization is completed. For simple applications such a setup is sufficient, for complex field configurations, you can describe the configuration of the attribute values, and then enter the code that explains the execution, so that you can accomplish more customization functions. For example, now the field area behind the "square meter" how to join, how to join the various types of combo fields, etc., I now this explanation only provides a custom idea, have more ideas to be implemented on their own.