Learn Extjs5 with me (31--add module and menu definition [4 front desk to invoke data and presentation via Ajax])

Learn Extjs5 with me (31--add module and menu definition [4 front desk to invoke data and presentation via Ajax])
The previous section has been done in the background so far, start Tomcat, in the browser to enter the URL: http://localhost:8888/app/applicationinfo.do, you can get the system parameter values. Here's a look at the results in the Chrome debugger.

So far, backstage temporarily, but also began to the foreground of the ExtJS program to modify. The first thing to modify is Mainmodel.js, in this JS file to add the constructor:

Constructor:function () {Ext.log (' Mainmodel constructor '); var me = this;//This sentence is key, if not, this is not initialized, the following ext.apply ( Me.data,....) This sentence will be wrong this.callparent (arguments);//Synchronous call Gets the system parameter Ext.Ajax.request ({url: ' applicationinfo.do ', async:false,// Synchronous Success:function (response) {var text = response.responsetext;//Converts a field string to a cost-variable var applicationinfo = Ext.decode (text, Tru e);//Add the parameters passed from the background to the data to Ext.apply (Me.data, ApplicationInfo);});}

Because the property names in the data passed in from the background are inconsistent with the attributes originally written in data, the Top.js and Bottom.js are modified. (The field of the table in the database I started with tf_, just to distinguish it from a field in a database.)        When you look at the code in the foreground, you also know that all the variables at the beginning of the tf_ are read from a few libraries. Top.js changed to the following:

/** * System home page of the top area, mainly placed system name, menu, and some shortcut button */ext.define (' App.view.main.region.Top ', {extend: ' Ext.toolbar.Toolbar ', alias: ' Widget.maintop ',//defines the xtype type of this component as maintopuses: [' app.ux.ButtonTransparent ', ' App.view.main.menu.ButtonMainMenu ', ' App.view.main.menu.SettingMenu '],defaults: {xtype: ' buttontransparent '},style: ' Background-color: #cde6c7 ', height : 40,items: [{xtype: ' image ', bind: {///data bound to Mainmodel in System.iconurlhidden: ' {!systeminfo.tf_iconurl} ',//if SYS Tem.iconurl is not set, this image does not display src: ' {systeminfo.tf_iconurl} '///based on System.iconurl settings to load the picture}}, {xtype: ' label ', bind: {text: ' {systeminfo.tf_systemname} '},style: ' Font-size:20px;color:blue; '}, {xtype: ' label ', Style: ' Color:grey; ', bind: {text : ' ({systeminfo.tf_systemversion}) '}, '-', ' {xtype: ' Buttonmainmenu ', Hidden:true,bind: {hidden: ' {!isbuttonmenu}  '}}, ', ', {text: ' Home ', Glyph:0xf015,handler: ' Onhomepagebuttonclick '}, {xtype: ' Settingmenu '}, {text: ' Help ', glyph : 0xf059}, {text: ' About ', glyph:0xf06a},', ', ' and ', {text: ' Search ', glyph:0xf002}, {text: ' Logout ', glyph:0xf011}, {glyph:0xf102,handler: ' Hiddentopbottom ', ToolTip: ' Hide top and bottom area ', disablemouseover:true}]});

Button.js changed to the following:

/** * The bottom area of the System home page, mainly places the user unit information, service units and service personnel information */ext.define (' App.view.main.region.Bottom ', {extend: ' Ext.toolbar.Toolbar ', Alias: ' Widget.mainbottom ', uses: [' App.ux.ButtonTransparent '],defaults: {xtype: ' buttontransparent '},style: ' Background-color: #f6f5ec; ', items: [{bind: {text: ' {USERINFO.TF_USERDWMC} '},glyph:0xf0f7}, {bind: {text: ' {Userinf O.tf_departmentname} '}}, {bind: {text: ' User: {userinfo.tf_username} '},glyph:0xf007}, '--', ' {bind: {text: ' {servicei Nfo.tf_servicedepartment} '},glyph:0xf059}, {bind: {text: ' {serviceinfo.tf_servicemen} '}}, {bind: {text: ' {Serviceinf O.tf_servicetelnumber} '},glyph:0xf095}, {bind: {hidden: ' {!serviceinfo.tf_serviceemail} ',//binding value in front of add! Indicates reverse, if there is an email is not hidden, if the email is not set, then hide text: ' {serviceinfo.tf_serviceemail} '},glyph:0xf003,handler:function (button) {// Send mail var vm = button.up (' App-main '). Getviewmodel (); var link = "mailto:" + vm.get (' serviceinfo.tf_serviceemail ') + "? subject= "+ vm.get (' USERINFO.TF_USERDWMC ') + vm.get (' Userinfo.tf_usernAme ') + "about" + vm.get (' systeminfo.tf_systemname ') + "consulting"; window.location.href = link;}}, {bind: {text: ' ©{serviceinfo . Tf_copyrightowner} '}]});

With the above modification, it is possible to complete the update of some information in the top and bottom of the system. Launch Tomcat, enter in the browser: http://localhost:8888/app/, will generate the following interface:

The system name, user units and operators, service units and contact information are taken from the background. Also click on the "email" link, you can go directly to the program that sent the message.


In the next section, update the menu to publish the source code.

Learn Extjs5 with me (31--add module and menu definition [4 front desk to invoke data and presentation via Ajax])