Learn Extjs5 with me. (Definition of 14--module field and grid column [1])

Learn Extjs5 with me. (Definition of 14--module field and grid column [1])This section adds module custom fields and generates models based on these fields. Then define the groupings and columns in the grid. From all this started to really get into the module of the custom rhythm, the complexity of the code and skills are also greatly improved. Start with the customization of the module field first. Check it out first.ModulemodelThe new definition added in. js:

/** * Module Data Model */ext.define (' App.view.module.ModuleModel ', {extend: ' Ext.app.ViewModel ', alias: ' Viewmodel.module ',// In the development process, I first set the value in the data, and so on later customization, the value of data is from the background obtained from the//all the database fields, I started with tf_, just to indicate that this is read from the background data: {tf_moduleid: ' 1010 ',/ /module ID number: The ID number of a number that can be placed in a block of the same grouped module according to the order of the ID number. Tf_modulegroup: ' Project Management ',//Module grouping: The module into which group, such as Business Module 1, Business Module 2, system settings, System management. Tf_modulename: ' Global ',//module identification: Identification of the only module in the system tf_title: ' Project ',//module name: The name that can describe this module information. TF_GLYPH:0XF0F7,//Icon character value tf_shortname:null,//module abbreviation: If the name is too long, some places can be replaced by abbreviations. tf_englishname:null,//Module English Name: In case you want to make English version, you can use the English name. Tf_englishshortname:null,//module abbreviation: Can be used as a generated encoding field.  tf_description:null,//Module Description: tf_remark:null,//NOTE://Below There are several fields are not joined, later when used to add Tf_primarykey: ' tf_id ',//primary key Tf_namefields : ' Tf_name ',//can be used to describe the field of record//custom field of this module, which is first manually defined, and then automatically obtained from the database tf_fields: [{tf_fieldid:10100010,//ID value of this field, all fields are saved in a In the field table, this is the primary key value tf_fieldname: ' tf_id ',//Field name Tf_title: ' ordinal ',//Field description Tf_fieldtype: ' Integer ',//field type Tf_ishidden:true,//Is hidden Tibetan field Tf_fieldgroup: ' Engineering Basics '//field group// is a hidden field}, {tf_fieldid:10100020,tf_fieldname: ' Tf_name ', Tf_title: ' Project name ', Tf_fieldtype: ' String ', TF_FIELDLEN:50,TF _isrequired:true,//is a must add Item Tf_fieldgroup: ' Engineering basic Information '}, {tf_fieldid:10100030,tf_fieldname: ' Tf_code ', Tf_title: ' Project code  ', Tf_fieldtype: ' String ', Tf_fieldlen:20,tf_isrequired:true,tf_fieldgroup: ' Engineering basic information '//field grouping}, {tf_fieldid:10100040, Add an integer field tf_fieldname: ' Tf_squaremeter ', Tf_title: ' GFA ', Tf_fieldtype: ' Integer ', Tf_unittext: ' sqm ',//field unit Tf_field Group: ' Project additional information ', tf_allowsummary:true//can be subtotal for this field}, {tf_fieldid:10100050,//Add an Amount field Tf_fieldname: ' Tf_budget ', Tf_ti TLE: ' Total investment ', Tf_fieldtype: ' Double ', tf_ismoney:true,///This field is an amount field Tf_fieldgroup: ' Engineering additional information ', tf_allowsummary:true}, {TF _fieldid:10100060,//Join a percentage field tf_fieldname: ' Tf_rjl ', Tf_title: ' volume ratio ', Tf_fieldtype: ' Percent ', Tf_fieldgroup: ' Engineering additional information '}, {tf_fieldid:10100070,//Join a date tf_fieldname: ' Tf_startdate ', Tf_title: ' Planned start time ', Tf_fieldtype: ' Date ', Tf_fieldgrou P: ' Engineering additional Information '}, {Tf_fieldid:10100080,//Join a date tf_fieldname: ' Tf_enddate ', Tf_title: ' Planned completion time ', Tf_fieldtype: ' Date ', Tf_fieldgroup: ' Project additional Information '}, {T  f_fieldid:10100090,//Join a Boolean field tf_fieldname: ' Tf_isvalid ', Tf_title: ' Whether through acceptance ', Tf_fieldtype: ' Boolean ', Tf_fieldgroup: ' Engineering additional Information '}, {tf_fieldid:10100100,//Add a numeric field tf_fieldname: ' tf_m3 ', Tf_title: ' Engineering Party volume ', Tf_fieldtype: ' Double ', tf_fieldgr OUP: ' Engineering additional information '}],//module grid scheme, you can define multiple scenarios tf_gridschemes: [{tf_schemeorder:10,tf_schemename: ' grid scheme 1 ',///First grid scheme//header sub- Group tf_schemegroups: [{tf_gridgroupid:1,//ID number tf_gridgrouporder:10,//header group ordinal tf_gridgroupname: ' Basic project information ', Tf_isshowhea Derspans:true,//Whether the grouping tf_islocked:true is displayed,//Whether this grouping is locked//each header is grouped under the field tf_groupfields: [{Tf_gridfieldorder:10,tf_fieldi  d:10100020,//Project Name field tf_columnwidth:200}, {tf_gridfieldorder:20,tf_fieldid:10100030,//Project Code field Tf_columnwidth: +}]}, {tf_gridgrouporder:20,//header group ordinal tf_gridgroupname: ' Project additional information ', tf_isshowheaderspans:true,//whether to show headerspantf_ Islocked:false,//whether lockedThis group//each table header is grouped under the following fields Tf_groupfields: [{tf_gridfieldorder:10,tf_fieldid:10100040//GFA}, {Tf_gridfieldorder:20,tf_fie LDID:10100050//Total investment}, {tf_gridfieldorder:30,tf_fieldid:10100060//volume rate}, {tf_gridfieldorder:40,tf_fieldid:10100 070//scheduled start time}, {tf_gridfieldorder:50,tf_fieldid:10100080//scheduled completion time}, {tf_gridfieldorder:60,tf_fieldid:10100090,// Whether to pass acceptance tf_columnwidth:80}, {tf_gridfieldorder:70,tf_fieldid:10100100//Engineering}]}]}]},//based on field ID, Locate the corresponding definition for the field getfielddefine:function (FieldID) {var result = null; Ext.Array.each (This.data.tf_fields, Function (field) {if (Field.tf_fieldid = = FieldID) {result = Field;return false;}}); return result;}})

        In the above code, the Tf_fields array is added to the data, and each element under this array is a field, such as:

{tf_fieldid:10100020,tf_fieldname: ' Tf_name ', Tf_title: ' Project name ', Tf_fieldtype: ' String ', tf_fieldlen:50,tf_ Isrequired:true,//is a must add Item Tf_fieldgroup: ' Engineering basic Information '}

The above defines a field of the project name, including ID number, field name, type, length, whether it is required, grouping information and so on. In this project module, I have added various types of fields, such as character, Integer, float, amount, date, Boolean, can be shown to see the effect.Once the field is defined, you need to be able to automatically generate the model based on the field's definition. I've compiled a model factory class that automatically generates a model based on the definition in Modulemodel. First create a new directory under the module directory factory, and then create a file under this modelfactory.js, the contents are as follows:

/** * Generates the module's model */ext.define (' app.view.module.factory.ModelFactory ', {///static variable or function statics: {//) according to the modules ' data Generate module model, the incoming data is Modelmodel in the Datagetmodelbymodule:function (Modulemodel) {console.log (' Modulemodel '); Console.log (Modulemodel); var module = Modulemodel.data;return ext.define (' App.model. ' + module.tf_modulename, {Extend : ' Ext.data.Model ', Module:module,idproperty:module.tf_primarykey,//Set module model's primary key NameFields:module.tf_nameFields, Set module model Name field Fields:this.getFields (module),//Set field//Get primary key value Getidvalue:function () {return This.get ( This.idproperty);},//Gets the name field of the current record getnamevalue:function () {if (this.namefields) return This.get (This.namefields); Elsereturn null;});},//generates individual fields from the model based on the field literal array getfields:function (module) {var field = [];for (var i in Module.tf_field s) {var fd = Module.tf_fields[i];var field = {Name:fd.tf_fieldname,title:fd.tf_title,type:this.gettypebystr (fd.tf_fi Eldtype)};if (Field.type = = ' string ') {field.usenull = True;field.serialize = This.conVerttonull;} if (Field.type = = ' Date ') {Field.datewriteformat = ' y-m-d ';//Set the read/write format of the date field Field.datereadformat = ' y-m-d ';} if (Field.type = = ' DateTime ') Field.datereadformat = ' y-m-d h:i:s '; fields.push (field);} Return fields;},//converts the data type in Java to the Extjs5 field type Gettypebystr:function (str) {switch (str) {case ' string ': Return ' string '; Case ' Boolean ': Return ' boolean ', Case ' Integer ': return ' int ', case ' date ': Return ' date ', Case ' Datetime ': return ' date '; CA Se ' Double ': Case ' float ': ' Percent ': return ' float ';d efault:return ' string ';}},//if it is an empty string, return Nullconverttonull:fun Ction (v) {return v V:null;}});

Above is a class that generates a model. Here's another attribute under data from the top modulemodel.js:Tf_gridschemes, the data under this attribute is used to define the groupings and columns of the grid,tf_schemegroups is defined by a number of groupings,tf_groupfields define the specific columns below these groupings. These data are also stored in the database, as long as the establishment of three tables, a put scheme name, a put group name, a set of grouped under the field definition. Modify the table, you can pass the data to the foreground, re-display is a new grid column scheme. And the program can be drawn up multiple, in the interface to all the Chinese switch. The following task is to generate a columns for the grid, the same way as the model generated above, to create a columnfactory.js program to generate columns based on the configuration file.

/** * Class */ext.define for generating grid columns (' App.view.module.factory.ColumnsFactory ', {statics: {getcolumns:function (  Modulemodel, Schemeorderid) {var scheme = modulemodel.get (' tf_gridschemes ') [0];//Get the scheme of the first grid var columns = [];for (var i In scheme.tf_schemegroups) {var sg = scheme.tf_schemegroups[i];//need to display grouping var isgroup = Sg.tf_isshowheaderspans;var Grou  p = {gridgroupid:sg.tf_gridgroupid,text:sg.tf_gridgroupname,locked:sg.tf_islocked,//flex:1,columns: []}for (Var j In Sg.tf_groupfields) {var GF = Sg.tf_groupfields[j];var FD = modulemodel.getfielddefine (Gf.tf_fieldid); var field;if (FD . Tf_ishidden) Continue;field = This.getcolumn (GF, FD, modulemodel); field.locked = Sg.tf_islocked;if (isgroup) { This.canreducetitle (Group, field); Group.columns.push (field);} Elsecolumns.push (field);} if (isgroup) {this.canreducetitle (Group, field); Columns.push (group);}} Console.log (columns); return columns;},//look at the group name is not the beginning of column, if it is the beginning, and columntitle behind the content, the// The same part of the cut off Canreducetitle:function (groUp, field) {if (field.text.indexOf (group.text) = = 0) {Field.text = Field.text.slice (group.text.length). Replace (' (', ') . Replace (') ', '). Replace (' (', ') '. Replace (') ', '), if (Field.text.indexOf ("<br/>") = = 0) Field.text = Field.text.slice (5);}},/** * Generate a column definition based on groupfield,fielddefine definition */getcolumn:function (GF, FD, module) {// Console.log (FD), var ft = fd.tf_title.replace (New RegExp ('--', ' GM '), ' <br/> '), if (fd.behindtext) ft + = ' <br/ > (' + fd.behindtext + ') '; var field = {filter: {},maxwidth:800,gridfieldid:gf.tf_gridfieldid,//Plus this property, used to change the width over the column After uploading to background sortable:true,text:ft,dataindex:fd.tf_fieldname}switch (fd.tf_fieldtype) {case ' Date ': ext.apply (field, {Xtyp E: ' Datecolumn ', align: ' center ', width:100}); Break;case ' Datetime ': ext.apply (field, {xtype: ' Datecolumn ', align: ' cen Ter ', width:130}); Break;case ' Boolean ': field.xtype = ' checkcolumn '; field.stopselection = False;field.processevent = function (type) {if (type = = ' click ') return false;}; Break;casE ' Integer ': ext.apply (field, {align: ' center ', xtype: ' Numbercolumn ', tdcls: ' Intcolor ', Format: ' # '}); Break;case ' Doubl E ': ext.apply (field, {align: ' center ', xtype: ' Numbercolumn ', width:110}); Break;case ' Float ': ext.apply (field, {align: ' Center ', xtype: ' Numbercolumn ', width:110}); Break;case ' Percent ': ext.apply (field, {align: ' center ', xtype: ' Numbercol Umn ', width:110}) break;case ' String ': break;default:break;} if (fd.tf_allowsummary) {ext.apply (field, {hassummary:true,summarytype: ' Sum '})}if (Gf.tf_columnwidth > 0) Field.width = Gf.tf_columnwidth;else if (gf.tf_columnwidth = =-1) {Field.flex = 1;field.minwidth = 120;} Return field;},/** * For the name field of the current module, bold display */namefieldrenderer:function (Val, RD, model, row, col, store, GridView) {return FILTERTEXTSETBK (store, ' <strong> ' + val + ' </strong> ');}});

Structure of the file: