Learn extjs5 with me (23 -- custom design of the module Form [1]), extjs523 --

Learn extjs5 with me (23 -- custom design of the module Form [1]), extjs523 --
Join me in extjs5 (23 -- custom design of the module Form [1]) to design and complete a simple custom process of Form. Prepare the data first in ModuleModel. under the data attribute in js, add the custom Form Parameter definition. The following Code defines a new attribute tf_formSchemes. Under this attribute, multiple formScheme can be defined, in the following example, only one field is added. In formScheme, two fieldsets are added, and several fields are defined under fieldSet.

// The form scheme of the module. You can define multiple schemes tf_formSchemes: [{tf_schemeOrder: 10, tf_schemeName: 'form scheme 1', // The first form scheme tf_1_wwidth: 600, // form window width tf_windowHeight:-1, // height-1 is automatically adapted height // header group tf_schemeGroups: [{tf_formGroupId: 1, // ID tf_formGroupOrder: 10, // header Group No. tf_formGroupName: 'Basic project information', tf_numCols: 1, // Number of columns // fields tf_groupFields: [{tf_formFieldOrder: 5, tf_fieldId: 10100010, tf_colspan: 1, // Number of columns occupied by this field tf_width:-1, // width, set-1 to 100% tf_isEndRow: true // end this row, the next field is arranged starting from the new row}, {tf_formFieldOrder: 10, tf_fieldId: 10100020, // The tf_colspan field of the Project name: 1, // Number of columns occupied by this field tf_width: -1, // width, set-1 to 100% tf_isEndRow: true // end the row. The next field is arranged from the new row.}, {tf_formFieldOrder: 20, tf_fieldId: 10100030, // project code field tf_colspan: 1, // Number of columns occupied by this field tf_width:-1, // width, set-1 to 100% tf_isEndRow: true // end this line, the next field is arranged from the new row}]}, {tf_formGroupOrder: 20, // header Group No. tf_formGroupName: 'additional project information', tf_numCols: 2, // Number of columns tf_collapsible: true, // This fieldSet foldable tf_collapsed: false, // The Field tf_groupFields: [{tf_formFieldOrder: 10, tf_fieldId: 10100040 // building area },{ tf_formFieldOrder: 20, tf_fieldId: 10100050 // total investment },{ tf_formFieldOrder: 30, tf_fieldId: 10100060, tf_isEndRow: true // end the row, the next field is arranged from the new row // plot ratio}, {tf_formFieldOrder: 40, tf_fieldId: 10100070 // scheduled start time}, {tf_formFieldOrder: 50, tf_fieldId: 10100080 // planned completion time },{ tf_formFieldOrder: 60, tf_fieldId: 10100090 // whether the application has passed the acceptance}, {tf_formFieldOrder: 70, tf_fieldId: 10100100 // Project Quantity}]

When the basic data is ready, you need to create a window. Create a new Directory window under the module Directory, and create the file BaseWindow. js under the window directory.

/***** Display, modify, and add a window base class **/Ext. define ('app. view. module. window. baseWindow ', {extend: 'ext. window. window ', alias: 'widget. basewindow', uses: ['app. view. module. form. baseForm '], layout: 'fit', maximizable: true, closeAction: 'hide ', bodyStyle: 'padding: 2px 2px 0', shadowOffset: 30, layout: 'fit ', initComponent: function () {this. maxHeight = document. body. clientHeight * 0.98; var me = this; this. formS Cheme = this. getViewModel (). get ('tf _ formSchemes ') [0]; // obtain the console of the first form solution. log (this. formScheme); this. title = this. getViewModel (). get ('tf _ title'); this. glyph = this. getViewModel (). get ('tf _ glyph'); var w = this. formScheme. tf_1_wwidth; var h = this. formScheme. tf_windowHeight; // if the height is-1, it indicates that it is adaptive if (w =-1 & h =-1) {this. width = 600; this. height = 400; this. maximized = true;} else {if (w! =-1) this. width = Math. min (w, document. body. clientWidth-2); if (h! =-1) this. height = Math. min (h, document. body. clientHeight-2) ;}; if (w =-1 & h! =-1) {// maximize the width of this. width = document. body. clientWidth-40;} this. tools = [{type: 'collapse', tooltip: 'export current record to Excel '}]; this. items = [{xtype: 'baseform', viewModel: this. getViewModel (), formScheme: this. formScheme}] this. callParent (arguments );}});

In this window, create the window size and title value based on the configuration information, and then create a form.
Create another form directory in the module Directory and create the file BaseForm. js under the form directory. After setting parameters in Form, create fieldSet Based on the configuration information. The processing of this class is very complicated. to process a normal fieldSet, you must also process tabs, accordion, and determine whether it is the Grid of the submodule. The following procedures have been simplified.

/***** The base class of a form window. New functions such as display, modification, review, and approval inherit the window **/Ext. define ('app. view. module. form. baseForm ', {extend: 'ext. form. panel ', alias: 'widget. baseform ', autoScroll: true, buttonAlign: 'center', initComponent: function () {var me = this; this. buttons = []; this. buttons. push ({text: 'close', itemId: 'close', icon: 'images/button/return.png '}); me. items = []; var groups = this. formScheme. tf_schemeGroups, hasTab = f Alse; var hasInTabPanel = false; // whether there are tabs embedded in the page, var inTabPanel; Ext. each (groups, function (group) {group. tf_numCols = group. tf_numCols | me. formScheme. tf_numCols; hasTab = hasTab | (group. tf_displayMode = 'tab'); hasInTabPanel = hasInTabPanel | (group. tf_displayMode = 'intabpanel ') ;}); if (hasTab) {var tabpanel = {xtype: 'tabpanel', frame: false, border: false, bodyPadding: '5 5 5 5', items: []}; g Roups [0]. tf_displayMode = 'tab'; // if the first tab forgets to set var nowtab; Ext. each (groups, function (group) {if (group. tf_displayMode = 'tab') {if (nowtab) tabpanel. items. push (nowtab); nowtab = {xtype: 'Container', title: group. tf_formGroupName, items: []};} nowtab. items. push (me. createFieldSetOrSubModule (group) ;}); tabpanel. items. push (nowtab); me. items = tabpanel;} else {me. bodyStyle = 'padding: 5px 5px 0'; Ext. eac H (groups, function (group) {if (group. tf_displayMode = 'intabpanel ') {intabpanel = {xtype: 'tabpanel', frame: false, border: false, height: 400, items: []}; Ext. apply (inTabPanel, me. getOtherSetting (group. tf_otherSetting) me. items. push (inTabPanel);} else if (group. tf_displayMode = 'intab') {var t = me. createFieldSetOrSubModule (group); t. title = group. tf_formGroupName; inTabPanel. items. push (t)} elsem E. items. push (me. createFieldSetOrSubModule (group)} me. callParent (arguments) ;}, getOtherSetting: function (str) {if (! Str) return {} elsereturn Ext. decode ('{' + str + '}', true)}, createFieldSetOrSubModule: function (group) {var me = this; return Ext. create ('app. view. module. form. fieldSet ', {autoScroll: true, viewModel: this. getViewModel (), schemeGroup: group, numCols: group. tf_numCols})}, initForm: function () {}, // The setRecordId called by other modules by clicking namefields: function (id) {var me = this; this. module. model. load (id, {success: function (record, operation, success) {// raw data returned by the record in success is a string that has not been decode and must be converted into an object me. setData (Ext. create (me. module. model, Ext. decode (record. raw) ;}};}, setData: function (model) {this. data = model; // this. getForm (). reset (); if (this. data) {// Ext. suspendLayouts (); this. getForm (). loadRecord (this. data); // Ext. resumeLayouts (true);} elsethis. getForm (). reset (); // check whether the form contains sub-modules. If yes, refresh it }});

After the Form Control is created, the content of each FieldSet will be created. Add the file FieldSet. js to the form directory. In this FieldSet, field generation is not added yet.

/***** Generate a fieldSet class in form **/Ext. define ('app. view. module. form. fieldSet ', {extend: 'ext. form. fieldSet ', alias: 'widget. formfieldset ', defaultType: 'textfield', ults :{}, layout: 'anchor', config: {module: undefined, // the module of this module defines schemeGroup: undefined, // defines the attributes of this fieldSet and the following fields 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 = []; this. callParent (arguments );}})

After the preceding steps, the three-level control of window-form-fieldset is added. The result is displayed below. In GridToolbar. js, add an event to the modify button:

{Text: 'modify', glyph: 0xf044, itemId: 'edit', handler: 'editrecord '}

Add a function to ModuleController. js:

editRecord : function(button) {var window = Ext.widget('basewindow',{viewModel : this.getView().getViewModel()});window.show();},

Add 'app. view. Module. window. basewindow' to module. js uses to run the program.




The following section will add different types of fields.