General function and Module customization system (CFCMMS)-029 Development log (Create Manytomany column4)

029 Development Log (Create Manytomany's Column4)
Based on the preparation of the above sections, Manytomanycolumn.js can be added to this section. Let's take a look at what you're doing. For example, click the text link to display the status of the record. Pressing the Delete button will display a prompt window asking if you want to delete this item.

The following is the code for manytomanycolumn.js.

/** * * Manytomany Records management, will be based on the permission settings to display the Modify or delete button * * Shong 2015.12.31 * */ext.define (' App.module.widget.column.ManyToManyColumn ', {Extend: ' Ext.grid.column.Column ', alias: ' Widget.manytomanycolumn ', Minwidth:200,editbuttonspan: ', Deletebuttonspan: ", Manytomanymodulename:null,manytomanymoduletitle:null,initcomponent:function () {var joinTable = this.fielddefine.tf_jointable;//Get jointable module definition var joinmodule = app.modules.getModule (jointable);//Manytomany The other end of the module name, the module field named Set<modulename>, or//list<module> Using regular expressions, get the content between <>. This.manytomanymodulename =/\w+/.exec (/<\w+>/.exec (This.fieldDefine.tf_fieldType) [0]) [0]; This.manytomanymoduletitle = App.modules.getModule (this.manytomanymodulename). tf_title;//If you have permission to modify the Jointable value, Then add one of the previous buttons that can be modified. if (joinModule.tf_userRole.tf_allowEdit) {This.editbuttonspan = ' <span class= ' manytomanyedit fa fa-edit ' ></ Span> ';} If you can delete it, add the button that you can delete. if (joinModule.tf_userRole.tf_allowDelete) {This.deletebuttonspan = ' <span Class= "Manytomanycontextclose fa fa-close" ></span> ";} This.callparent ();},renderer:function (Val, metaData, model, row, col, store, GridView) {if (val) {//"0000, admin, 1700| | | 0005, city level administrator, 1701| | | 0010, query role, 1702 ",//The third value represents Jointable's primary key var records = Val.split (' | | | '); var column = Gridview.headerCt.getGridColumns () [Col];var TPL = new Ext.template (column.editbuttonspan+ ' <span class= "Manytomanytd" >{val}</span> "var result ="; for (var i in records) {var fields = Records[i].split (', '); result + = ' <span class= "Manytomanycontext" _id= "' + fields[0]+ '" _joinid= "' + fields[2] + '" > ' + fields[1] + ' </span&gt ;' + Column.deletebuttonspan;} Return tpl.apply ({val:result});}},processevent:function (type, view, cell, Recordindex, CellIndex, E,record, row) {var me = this;if (type = = = ' click ') {if (E.gettarget (). ClassName = = = ' Manytomanycontext ') {App.modules.showModuleRecord (this . Manytomanymodulename, E.gettarget (). getattribute (' _id '));} else if (Ext.String.startsWith (E.gettaRget (). ClassName, ' Manytomanycontextclose ') {//Click the Delete button to first find the previous node containing the information to be deleted var target = E.gettarget ().  Previouselementsibling;var module = this.up (' Modulegrid '). Module;var Text = module.tf_title + "+ record.gettitletpl () + ' + this.manytomanymoduletitle + ' "' + target.innerhtml + '"; Ext.MessageBox.confirm (' OK to delete ', ' OK to delete ' + text + '? ', function (BTN) {if (btn = = ' yes ') {/////Use the module to delete bulk AjaxExt.Ajax.req Uest ({url: ' rest/module/removerecords.do ', params: {modulename:me.fielddefine.tf_jointable,ids: Target.getattribute (' _joinid '), titles:target.innerhtml},success:function (response) {var info = Ext.decode ( Response.responsetext, True); if (Info.resultcode = = 0) {ext.toastinfo (text + ') was successfully deleted. ///delete the record and refresh the current record me.up (' Modulegrid '). Refreshselectedrecord (); else {Ext.MessageBox.show ({title: ' Delete result ', Msg:text + ' delete failed:<br/><br/> ' + info.errormessagelist,buttons: Ext.messagebox.ok,icon:ext.messagebox.error});}},failure:function () {Window.alert (' The server returns an error when deleted);}})}});} else if (Ext.String.startsWith (E.gettarget (). ClassName, ' Manytomanyedit ')) Console.log (' Edit the Manytomany field of the current record ');}})

In addition, you need to create a CSS file Manytomanycolumn.scss file in the Webcontent/sass/src/module/widget/column directory, and then use the Sencha You can add scss to the main CSS file by compiling the command.

. manytomanytd {White-space:pre-line;word-wrap:break-word;}. Manytomanyedit {cursor:pointer;font-size:12px;}. Manytomanycontext {margin-left:3px;cursor:pointer;text-decoration:underline;color: #11264f; white-space:nowrap;}. manytomanycontextclose {cursor:pointer;font-size:9px;vertical-align:super;}

Press the Edit button to select the Manytomany value of the current record in the following section of the window.

Since Manytomany is two-way, since we can manage the operation role in the user module, we should also be able to control the user in the operation role. As soon as you configure it, you don't need to modify any code. The @manytomany field in _role can be added or not added.　　The user's Manytomany control can be added to user roles in just two steps. 1, to the user operation color _role, add a field as follows: 2? Add the user list field to the grid scheme of the user Action role.
The grid that is the user action role.

All subsequent Manytomany fields can be configured to operate.

General function and Module customization system (CFCMMS)-029 Development log (Create Manytomany column4)