Learn extjs5 with me (31 -- add module and menu Definition [4 call data and display through ajax on the frontend]), extjs531 --

Learn extjs5 with me (31 -- add module and menu Definition [4 call data and display through ajax on the frontend]), extjs531 --
Learn extjs5 with me (31 -- add modules and menu Definitions [4. Call data and display through ajax on the frontend])
In the previous section, the background has been completed so far. start tomcat and enter the URL http: // localhost: 8888/app/applicationinfo in the browser. do to obtain the system parameter value. Next let's take a look at the results in the chrome debugger.

So far, the background has come to an end, and we have to begin to modify the extjs program at the front end. The first thing to modify is MainModel. js. Add the constructor to this js file:

Constructor: function () {Ext. log ('mainmodel constructor'); var me = this; // this sentence is critical. If not, this has not been initialized. The following Ext. apply (me. data ,....) this sentence will cause an error. callParent (arguments); // synchronously call to obtain the system parameter Ext. ajax. request ({url: 'applicationinfo. do ', async: false, // synchronize success: function (response) {var text = response. responseText; // The local variable var applicationInfo = Ext. decode (text, true); // Add the parameters passed from the background to data to Ext. apply (me. data, applicationInfo );}});}

Because the attribute names in the data transmitted in the background are inconsistent with those originally written in data, Top. js and Bottom. js should be modified. (The fields in the database table are all started with tf _, just to distinguish this is a field in the database. When you look at the front-end code, you can also know that all variables starting with tf _ are read from the library ). Change Top. js to the following:

/*** The top area of the system home page, mainly containing the system name, menu, and some shortcut buttons */Ext. define ('app. view. main. region. top ', {extend: 'ext. toolbar. toolbar ', alias: 'widget. maintop ', // defines the xtype 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: {// bind data to M System. iconUrlhidden :'{! SystemInfo. tf_iconUrl} ', // if the system. if the iconUrl is not set, the image does not display src: '{systemInfo. tf_iconUrl} '// according to system. iconUrl settings to load images }}, {xtype: 'label', bind: {text: '{systemInfo. tf_systemName} '}, style: 'font-size: 20px; color: blue;'}, {xtype: 'label', style: 'color: gray; ', bind: {text: '({systemInfo. tf_systemVersion}) '}},'-> ', {xtype: 'buttonmainmenu', hidden: true, bind: {hidden :'{! IsButtonMenu} '}}, '','', {text: 'homepage', glyph: 0xf015, handler: 'onhomepagebuttonclick'}, {xtype: 'settingmenu '}, {text: 'help', glyph: 0xf059}, {text: '', glyph: 0xf06a},'-> ','-> ', {text: 'search', glyph: 0xf002}, {text: 'login', glyph: 0xf011}, {glyph: 0xf102, handler: 'hiddentopbottom ', tooltip: 'hide top and bottom region', disableMouseOver: true}]});

Change Button. js to the following:

/*** The bottom area of the system homepage, which mainly contains information about the user unit, service unit, and service personnel */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:' {userInfo. tf_departmentName} '}}, {bind: {text:' user: {user Info. tf_userName} '}, glyph: 0xf007},'-> ', {bind: {text:' {serviceInfo. tf_serviceDepartment} '}, glyph: 0xf059}, {bind: {text:' {serviceInfo. tf_serviceMen} '}}, {bind: {text:' {serviceInfo. tf_serviceTelnumber} '}, glyph: 0xf095}, {bind: {hidden :'{! ServiceInfo. tf_serviceEmail} ', // Add the value before the binding value! Indicates reverse retrieval. If there is an email, it is not hidden. If the email is not set, 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 ') + "consultation"; window. location. href = link ;},{ bind: {text :'©{ServiceInfo. tf_copyrightOwner} '}]});

After the preceding modifications, you can update the top and bottom information of the system. Start tomcat and enter http: // localhost: 8888/app/in the browser. The following interface is generated:

The system name, user unit, operator, service unit, and contact information are retrieved from the background. In addition, click the "email" link to directly go to the mail sending program.


In the next section, update the menu and release the source code.