Learn Extjs5 with me. (23--module form custom design [1])

Learn Extjs5 with me. (23--module form custom design [1])The following begins the process of designing and completing a simple form customization. Before you prepare the data, add the parameter definition of the custom form below data property in Modulemodel.js, a new attribute tf_formschemes is defined in the code below, and you can define multiple Formscheme under this property. In the following example, only one is added, two fieldset are added to the Formscheme, and several fields are defined below fieldset.

The form scheme of the module can define multiple scenarios tf_formschemes: [{tf_schemeorder:10,tf_schemename: ' form scheme 1 ',///first form scheme tf_windowwidth:600,/ /Form window width tf_windowheight:-1,//height-1 is automatically adapted to height//header grouping tf_schemegroups: [{tf_formgroupid:1,//ID number Tf_formgroupor  Der:10,//header group ordinal tf_formgroupname: ' Project basic information ', tf_numcols:1,///column number//each table header group the following fields Tf_groupfields: [{Tf_formfieldorder : 5,tf_fieldid:10100010,tf_colspan:1,//number of columns used in this field tf_width: -1,//width, set-1 to end the line for 100%tf_isendrow:true//, the next field starts from the new row Column}, {tf_formfieldorder:10,tf_fieldid:10100020,///Project Name field Tf_colspan:1,////number of columns used in this field tf_width: -1,//width, set-1 for 100%tf_ isendrow:true//end the line, the next field starts from the new row}, {tf_formfieldorder:20,tf_fieldid:10100030,///Project Code field Tf_colspan:1,////This field occupies Number of columns Tf_width: -1,//width, setting-1 ends the line for 100%tf_isendrow:true//, the next field starts from the new Row}]}, {tf_formgrouporder:20,//header group ordinal tf_formgroup Name: ' Project additional information ', tf_numcols:2,///column number tf_collapsible:true,//This fieldset collapsible tf_collapsed:false,//default not collapsed//each header grouped under the word Segment Tf_groupfields: [{tf_formfieldorder:10,tf_fieldid:10100040//GFA}, {tf_formfieldorder:20,tf_fieldid:10100050//total investment}, {Tf_formFieldOrde r:30,tf_fieldid:10100060,tf_isendrow:true//end the line, the next field starts with the new row//volume rate}, {tf_formfieldorder:40,tf_fieldid:10100070 Scheduled start time}, {tf_formfieldorder:50,tf_fieldid:10100080//scheduled completion time}, {tf_formfieldorder:60,tf_fieldid:10100090// {tf_formfieldorder:70,tf_fieldid:10100100//)}]}]

When the underlying data is ready, you need to create a window. Create a new directory in the Module directory window, set up the file Basewindow.js in the window directory.

/** * * A display, modify, new Window base class * */ext.define (' App.view.module.window.BaseWindow ', {extend: ' Ext.window.Window ', alias: ' WIDG Et.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.b Ody.clientheight * 0.98;var me = This;this.formscheme = This.getviewmodel (). Get (' tf_formschemes ') [0]; Get the first form scheme Console.log (this.formscheme), this.title = This.getviewmodel (). Get (' Tf_title '); this.glyph = This.getviewmodel (). Get (' tf_glyph '); var w = this.formscheme.tf_windowwidth;var h = this.formscheme.tf_windowheight;/ /height is-1 means 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) {//width maximization this.width = document.body.clientWidth-40;} This.tools = [{type: ' Collapse ', tooltip: ' Current record exported to Excel '}];this.items = [{xtype: ' BaseForm ', ViewModel:this.getViewMode L (), formscheme:this.formscheme}]this.callparent (arguments);}});

In this window, based on the configuration information to create the window size and title value, and then go to creating a form.
Create a form directory in the module directory and create the file Baseform.js in the form directory. Once the parameters are set in the form, each fieldset is created according to the configuration information. The processing of this class is very complex, to deal with normal fieldset, but also to deal with TAB, accordion, and whether it is a sub-module of the grid judgment, the following program has been simplified.

/** * * A Form window of the base class, new, display, modify, review, approval and other functions inherited this 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.button s = [];this.buttons.push ({text: ' Off ', ItemId: ' Close ', icon: ' Images/button/return.png '}); me.items = [];var groups = this . formscheme.tf_schemegroups, Hastab = False;var Hasintabpanel = false; Whether there is Tab,var intabpanel embedded in the page; 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: []};groups[0] . Tf_displaymode = ' tab '; If the first tab forgets to set the 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.each (groups, function (group) {if (Group.tf_displaymode = = ' Intabpanel ') {Intabpanel = {xtype: ' TabPanel ', frame:fals E,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)} Elseme.items.push (Me.createfieldsetorsubmodule (group))})}me.callparent (arguments);}, Getothersetting:function (str) {if (!STR) return {}elsereturn Ext.decode (' {' + str + '} ', true)},createfieldsetorsubmodul E: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 () {},//is not the information that is called in the grid to display a record, it is possible that other modules clicked Namefields to invoke the Setrecordid:function (id) {var me = this; This.module.model.load (ID, {success:function (record, operation, success) The raw data returned in the record in {//success, is a string, Me.setdata (Ext.create (Me.module.model, Ext.decode (Record.raw))) without passing through the decode to the object,},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 the form for sub-modules, if any, refresh}});

When a form's control is created, it continues to create the contents of each fieldset. Add the file Fieldset.js in the form directory. In this fieldset, the generation of fields has not been added for the time being.

/** *  * generates a FIELDSET class in a form *  */ext.define (' App.view.module.form.FieldSet ', {extend: ' Ext.form.FieldSet ',  Alias: ' Widget.formfieldset ', DefaultType: ' TextField ', defaults: {},layout: ' anchor ', config: {module:undefined,// The module definition for this 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 = [];this.callparent (arguments);}})

With the above steps, the creation of the Window-form-fieldset level three control is added, and the result is shown below. In Gridtoolbar.js, add an event to the Modify button:

{text: ' Modify ', Glyph:0xf044,itemid: ' Edit ', handler: ' EditRecord '}

Add a function to the modulecontroller.js:

Editrecord:function (button) {var window = ext.widget (' Basewindow ', {ViewModel:this.getView (). Getviewmodel ()}); Window.show ();},

Join in the uses of Module.js ' App.view.module.window.BaseWindow ', so you can run it.




The following section will include different kinds of field.