General function and Module customization system (CFCMMS)-019 custom grid scheme (3)

General function and Module customization system (CFCMMS)-019 custom grid scheme (3)
This section begins with a custom interior to see how the first custom feature is implemented.1. When the system logs in, all the module definition information that the login user has permission to send to the front end. This piece of code is in App/view/main/mainmodel.js. When Mainmodel is created, the data is fetched by sending a synchronous AJAX request. After the data is obtained, all the module information is placed in the Mainview.

Ext.Ajax.request ({url: ' applicationinfo.do ', async:false,//sync success:function (response) {var text = Response.respons Etext;var applicationinfo = Ext.decode (text, true); applicationinfo.tf_previewexts = Applicationinfo.tf_ Previewexts.split (', '); for (i-applicationinfo.modules) {var moduleinfo = Applicationinfo.modules[i];for (J in ApplicationInfo.roleInfo.tf_userRoleDetails) {if (Applicationinfo.roleinfo.tf_userroledetails[j].tf_moduleid = = Moduleinfo.tf_moduleid) {//Add permission information for each module moduleinfo.tf_userrole = applicationinfo.roleinfo.tf_userroledetails[j]; Break;}} if (!moduleinfo.tf_userrole) Moduleinfo.tf_userrole = {};//Creates a Moduleinfo module information class for each module Me.data.modules.add ( Moduleinfo.tf_modulename,new ext.create (' App.module.ModuleInfo ', Moduleinfo));} Delete Applicationinfo.modules;delete applicationInfo.roleInfo.tf_userRoleDetails; Ext.apply (Me.data, ApplicationInfo);});

All data loaded from the background in the "province" module is shown in the following:

　　2. When creating the module display, the columns of the grid is generated according to the definition in Tf_gridschemes. A columnsfactory.js was established in app/module/factory/to generate columns based on the definition of the module's grid. The main section of the code is as follows:

/** * module is the meaning of the modules, Schemeorderid is the order number of the columns to be generated, the order number is not specified, then the default first scheme */getcolumns:function (module, schemeorderid) {var Scheme = Module.getgridscheme (Schemeorderid), if (Schemeorderid) {//Find the corresponding SchemeExt.Array.each (module.tf_ Gridschemes, function (s) {if (S.tf_schemeorder = = Schemeorderid) {scheme = S;return false;}});} var columns = [];//whether there are attachments, attachments are added if the attachment button if (module.tf_hasattachment&& module.tf_userRole.tf_attachmentBrowse) Columns.push ({locked:true,xtype: ' Attachmentnumbercolumn '});//Whether the module has audit function if (module.tf_hasauditing) {Columns.push ( {locked:true,xtype: ' Auditingactioncolumn '});} Whether the module has an approval function if (module.tf_hasapprove) {Columns.push ({locked:true,xtype: ' Approveactioncolumn '});} Whether the module has a payment function if (module.tf_haspayment) {Columns.push ({locked:true,xtype: ' Payoutactioncolumn '});} If it is an attachment module, add a column that can be previewed if (module.tf_modulename = = ' _attachment ') {Columns.push ({dataindex: ' Tf_attachmentid ', Text: ' Preview ') , align: ' center ', menudisabled:true,sortable:true,width:56,resizable:falsE,renderer:function (Val, RD, model) {if (Model.get (' Tf_filename ')) return '  '; Elsereturn '  ';}});} If the module has the record icon, add the Record field icon column if (Module.tf_hasrecordicon) {Columns.push ({xtype: ' Recordiconcolumn '})}for (var i in scheme.tf_schemegroups) {var sg = scheme.tf_schemegroups[i];//need to group var isgroup = Sg.tf_isshowheaderspans;var Group = {g Ridgroupid:sg.tf_gridgroupid,text:sg.tf_gridgroupname,locked:sg.tf_islocked,columns: []};for (Var j in Sg.tf_group Fields) {var GF = Sg.tf_groupfields[j];var FD = module.getfielddefine (Gf.tf_fieldid); var field;if (FD) {if (Fd.tf_ishidde N) Continue;field = This.getcolumn (GF, FD, module);} else {//If it is not the basic field of this module, then look in the additional field (possibly the parent module, the field of the grandparent module, or the aggregated field of the submodule) var fd = Module.getadditionfielddefine (Gf.tf_fieldid); field = This.getcolumn (GF, FD, module); if (Field.dataIndex.search (' c_ ') = = 0) {field.modulename = Field.dataindex.Slice (2); field.renderer = This.childcountfieldrenderer;}} field.locked = sg.tf_islocked | | gf.tf_islocked;//If the column Display field has additional properties, such as renderer can be placed here to add in if (gf.tf_othersetting) {try {eval (' ext.apply (field, ' + gf.tf_ othersetting + ') ');} catch (Err) {}}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;}

The above code first, according to the module settings, determine whether there are some independent information display fields, such as attachments, icons, preview columns and so on. The grouping definitions in Gridscheme are then added to columns in turn.　　When you join, you also have to decide whether to show the grouping. Here is a title display of the problem, such as the name of a group called: "This year", and the field under the group called "New amount this year", then the field name "This year" will be omitted, the following function is used to handle this operation.

See if the grouping name is the beginning of the column below, and if it is the beginning, and the content behind the Columntitle, then the//same section is truncated 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);}},

If a field has a unit of measure, you need to display it in the table header.

Gettextandunit:function (FD) {var result = Fd.tf_title.replace (new RegExp ('--', ' GM '), ' <br/> ');// Title in the middle there--to indicate the newline var unittext = Ext.monetary.unitText = = = ' "?" ": Ext.monetary.unittext;if (fd.tf_ismonetary && ext.monetaryposition = = = ' Columntitle ') {//May choose the amount of units thousand, million, million, Billion if (Fd.tf_unittext | | unittext) Result + = ' <br/><span style= "color:green;" > (' + unittext+ (fd.tf_unittext fd.tf_unittext: ') + ') </span> ';} else {if (fd.tf_unittext) result + = ' <br/><span style= "color:green;" > (' + fd.tf_unittext + ') </span> ';} return result;},

There is also a getcolumn function that is used to generate the definitions for each column.

/** * Generate a column definition based on groupfield,fielddefine definition */getcolumn:function (GF, FD, module) {var field = {filter: {},maxwidth : 800,fielddefine:fd,gridfieldid:gf.tf_gridfieldid,//plus this property for uploading to the background after the column has changed width sortable:true,text:this.gettextandu NIT (FD), Dataindex: (Fd.basefield | | fd.tf_aggregate)? Fd.tf_fieldname:fd.manytoone_titlename};if (FD.TF_TOOLTIPTPL) {field.tooltiptpl = FD.TF_TOOLTIPTPL;// The TPL value of the ToolTip displayed on the field value field.tooltipxtemplate = new Ext.xtemplate (FD.TF_TOOLTIPTPL);} if (gf.tf_ishidden) Field.hidden = true;//If it is a field that this person can approve, then add an approved tag if (module.tf_hasapprove&& module.tf_ Userrole.tf_approveorder >= 1) {if (field.dataIndex.indexOf (' tf_sh ') = = 0&& Field.dataIndex.substr ( Field.dataindex.length-1, 1) = = Module.tf_userRole.tf_approveOrder) Field.text = ' <span class= ' Approvethisgridheadicon "> ' + '  ' + fd.tf_title + ' </span> ';} Switch (fd.tf_fieldtype) {case ' Image ': ext.apply (field, {xtype: ' ImagecoluMn ', align: ' center ', width:100,}); Break;case ' Date ': ext.apply (field, {xtype: ' Datecolumn ', align: ' center ', width:100, Renderer:Ext.util.Format.dateRenderer}); Break;case ' Datetime ': ext.apply (field, {xtype: ' Datecolumn ', align: ' Center ', width:130,renderer:ext.util.format.daterenderer}); 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: ' right ', xtype: ' Numbercolumn ', tdcls: ' Intcolor ', Format: ' # ', renderer:e Xt.util.Format.intRenderer}); Break;case ' Double ': ext.apply (field, {align: ' right ', xtype: ' Numbercolumn ', width:110, Renderer:Ext.util.Format.floatRenderer}); Break;case ' Float ': ext.apply (field, {align: ' right ', xtype: ' Numbercolumn ') , width:110,renderer:ext.util.format.floatrenderer}); Break;case ' Percent ': ext.apply (field, {align: ' center ', Xtype: ' Widgetcolumn ', width:110,//Renderer:Ext.util.Format.percentRendererwidgeT: {xtype: ' Progressbarwidget ', animate:true,texttpl: [' {Percent:number ("0")}% ']}}); Break;case ' String ': if (module.t F_namefields = = fd.tf_fieldname) ext.apply (field, {text: ' <span class= ' fa fa-key ' > ' + fd.tf_title+ ' </span> ' , Renderer:ext.util.format.namefieldrenderer,summarytype: ' Count ', summaryrenderer:function (value) {return Ext.String.format (' Subtotal ({0} Records) ', value);}}); Elseext.apply (field, {renderer:Ext.util.Format.defaultRenderer}); break;default:ext.apply (field, {renderer: Ext.util.Format.defaultRenderer}); break;} if (FD.S) {//tf_allowsummaryext.apply (field, {hassummary:true,summarytype: ' Sum '});} If it is possible to change the value of the display unit, you can choose million, thousand, million, billion if (fd.tf_ismonetary) Field.renderer = ext.util.format.monetaryrenderer;if (gf.tf_ ColumnWidth > 0) field.width = Gf.tf_columnwidth;else if (gf.tf_columnwidth = =-1) {Field.flex = 1;field.minwidth = 120; }if (fd.manytoone_titlename) {var pmodule = App.modules.getModuleInfo (fd.tf_fieldtype); var icon = '; if (Pmodule && Amp PmodUle.iconurl) icon = '  '; Ext.apply (field, {renderer:ext.util.format.manytoonefieldrenderer,text: ' <span class= ' Gridheadicon ' > ' + icon + Fd.tf_title+ ' </span> ', Manytooneidname:fd.manytoone_idname,modulename:fd.tf_fieldtype});} If a field is an additional field, which is exactly one of the namefileds fields of the parent module's parent module, it is also added to click the function//p__t1020___tf_title that can be displayed, such as if ( Ext.String.startsWith (Fd.tf_fieldname, "P_")) {var fn = Fd.tf_fieldname;var Ppasname = fn.substring (2, ten); if (ppasname[ 6] = = ' _ ') Ppasname = ppasname.substring (0, 6); var pmodule = App.modules.getModuleInfo (ppasname); if (Ext.String.endsWith (FN, Pmodule.tf_namefields)) {var icon = '; if (pmodule && pmodule.iconurl) icon = '  '; Ext.apply (field, {renderer:ext.util.format.manytoonefieldrenderer,text: ' <span class= ' Gridheadicon ' > ' + icon+ Fd.tf_title.replace (New RegExp ('--', ' GM '), ' <br/> ') + ' </span> ', ManytooneIdName:pmodule.tableAsName + ' _ __ ' + PMODule.tf_primarykey,modulename:pmodule.tf_modulename});}} return field;},

There are also functions that are used to generate parent module record link fields and sub-module aggregation fields, as described in the program.
These functions allow you to dynamically generate the columns needed for a grid based on the configuration information.

General function and Module customization system (CFCMMS)-019 custom grid scheme (3)