Learn extjs5 with me (24 -- custom design of the module Form [2]), extjs524 --

Learn extjs5 with me (24 -- custom design of the module Form [2]), extjs524 --
Learn extjs5 (24 -- custom design of the module Form [2]) with me. In this section, we will add various types of fields, when a field is added, multiple fields can be added to one row. Therefore, a layer of fieldcontainer is added to the hierarchy. The main layers in form are as follows: form -- fieldSet -- fieldcontainer -- field. Now add the fieldcontainer generator file, and add the file FieldContainerFactory. js to the factory.

/*** 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 (var I in container) {var field = container [I]; // if it is an empty position if (field. spacer) {result. items. push ({xtype: 'fieldiner iner ', layout: 'anchor', margin: '0 0 0 0', flex: f Ield. 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 we want to add the generator FormFieldFactory. js of the last field. This file can be placed under the factory directory.

/*** Is used to generate every field in form */Ext. define ('app. view. module. factory. formFieldFactory ', {statics: {labelDefaultWidth: 92, dateDefaultSize: 14, integerDefaultSize: 10, moneyDefaultSize: 14,/*** according to the module definition, formField definition, formtype to return the definition of a field */getField: function (fieldDefine, formField, formtype, module) {var field = {name: fieldDefine. tf_fieldName, fieldLabel: formField. fieldLabel | (formField. labelhe Ad? FormField. labelhead: '') + 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 (formFiel D. hideLabel) field. hideLabel = true; // if it is a hidden field if (this. getIsHidden (fieldDefine, formField) {Ext. apply (field, {xtype: 'dendenfield'}); return field;} Ext. apply (field, this. getFieldXType (fieldDefine, field); if (formField. tf_width =-1) {delete field. size; field. anchor = '000000';} // is it a required field if (fieldDefine. tf_isRequired) Ext. apply (field, {allowBlank: false}); return field ;},/*** determine the field type */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: 'meta'}; 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 'strin G': var len = fieldDefine. l; if (len = 0 | len> 100) return {maxLength: len = 0? Number. MAX_VALUE: len, enforceMaxLength: true, anchor: '000000', grow: true, growMax: 100%, growMin: 40, xtype: 'texteafield'} 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 ;}}}}}},/*** determines whether it is a hidden field */getIsHidden: function (fieldDefine, formField) {return (fieldDefine. tf_isHidden | formField. tf_isHidden )}}});

In the above field generation factory, the combo and select the parent field attribute operations are omitted, and only the contents of the struct, numeric, Boolean, and date types are generated.
Now you need to modify the content in fieldSet. js to add it to FieldContainer, and re-release the file:

/***** Generate a fieldSet class in form **/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, // the module of this module defines schemeGroup: undefined, // defines the attributes of this fieldSet and the numC field to be added below Ols: 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 = []; // calculate the number of iner. If col = 2, a line feed is provided for the two, or specify the line feed var hiddens = []; // The hidden field var container = []; var c = 0; for (var I in this. schemeGroup. tf_groupFields) {var f Ield = this. schemeGroup. tf_groupFields [I]; var fieldDefine = this. getViewModel (). getFieldDefine (field. tf_fieldId); // if it is a hidden field, it is directly placed 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. getViewModel (). getFieldDefine (field. tf_fieldId); if (fieldDefine && FieldDefine. tf_isHidden) {continue;} // If tf_colspan is set to 0, set it to 1. If it is greater than tf_colspan, set it to tf_colspanfield.tf_colspan = field. tf_colspan? Field. tf_colspan: 1; if (field. tf_colspan> this. numCols) field. tf_colspan = this. numCols; // if this row exceeded numCols, it will be divided into two rows 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. Several fields can be placed in one container. If the column is 3, put three for (var I in containers) {this. items. push (app. view. module. factory. fieldContainerFactory. getContainer (containers [I], this. getViewModel (), this. formtype);} // Add the hidden field 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 );}})

In BaseForm. js, you have also redefined buttons and added a Save button.

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

The editRecord event processing function in ModuleController. js is also modified, and the function used to call records in the currently selected Grid is added.

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 preceding steps, you can see the following window for modifying the form. The height of the window is automatically adapted.


So far, a basic interface customized according to the form parameter has been set up. This is enough for a simple application. For complicated field configuration, you can describe it as the Attribute Value configuration, and then re-explain the executed code, in this way, you can complete more customization functions. For example, how to add "square meters" behind the current field building area, and how to add various types of combo fields. My current explanation only provides a custom idea, if you have more ideas, you must implement them by yourself.







Ext JS 42, custom VTypes times Extformfield undefined

This should be a custom validator.

Create a new js file, and then reference it.