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

Source: Internet
Author: User

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])

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.