跟我一起學extjs5(31--加入模組和菜單定義[4前台通過ajax來調用資料與展示])，extjs531--

跟我一起學extjs5(31--加入模組和菜單定義[4前台通過ajax來調用資料與展示])，extjs531--
跟我一起學extjs5(31--加入模組和菜單定義[4前台通過ajax來調用資料與展示])
        上一節已經把到現在為止的後台做好了，啟動tomcat ,在瀏覽器中打入網址：http://localhost:8888/app/applicationinfo.do，就可以取得系統參數值。下面看一下在chrome調試器中的結果。

        到此為止，後台暫告一段落，又要開始對前台的extjs的程式進行修改了。        首先要修改的是MainModel.js,在此js檔案中加入建構函式：

constructor : function() {Ext.log('MainModel constructor');var me = this;// 這一句是關鍵，如果沒有的話，this還沒有初始化完成,下面的Ext.apply(me.data,....)這句就會出錯this.callParent(arguments);// 同步調用取得系統參數Ext.Ajax.request({url : 'applicationinfo.do',async : false, // 同步success : function(response) {var text = response.responseText;// 將欄位串轉換成本地變數var applicationInfo = Ext.decode(text, true);// 把從後台傳過來的參數加入到data中去Ext.apply(me.data, applicationInfo);}});}

        由於後台傳送過來的data中的屬性名稱和原來寫在data裡的屬性不一致，因此要修改Top.js和Bottom.js。（資料庫的表的欄位我都是用tf_開頭，只是為了區分這是一個資料庫裡的欄位而己。在看前台的代碼時也能知道，所有tf_開頭的變數都是從數庫裡讀出來的）。        Top.js更改為如下：

/** * 系統首頁的頂部地區，主要放置系統名稱，菜單，和一些快捷按鈕 */Ext.define('app.view.main.region.Top', {extend : 'Ext.toolbar.Toolbar',alias : 'widget.maintop', // 定義了這個組件的xtype類型為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 : { // 資料繫結到MainModel中data的system.iconUrlhidden : '{!systemInfo.tf_iconUrl}', // 如果system.iconUrl未設定，則此image不顯示src : '{systemInfo.tf_iconUrl}' // 根據system.iconUrl的設定來載入圖片}}, {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 : '首頁',glyph : 0xf015,handler : 'onHomePageButtonClick'}, {xtype : 'settingmenu'}, {text : '協助',glyph : 0xf059}, {text : '關於',glyph : 0xf06a}, '->', '->', {text : '搜尋',glyph : 0xf002}, {text : '登出',glyph : 0xf011}, {glyph : 0xf102,handler : 'hiddenTopBottom',tooltip : '隱藏頂部和底部地區',disableMouseOver : true}]});

        Button.js更改為如下：

/** * 系統首頁的底部地區，主要放置使用者單位資訊，服務單位和服務人員資訊 */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 : '使用者:{userInfo.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}', // 綁定值前面加！表示取反，如果有email則不隱藏，如果email未設定，則隱藏text : '{serviceInfo.tf_serviceEmail}'},glyph : 0xf003,handler : function(button) {// 發送郵件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') + " 關於 "+ vm.get('systemInfo.tf_systemName') + " 的諮詢";window.location.href = link;}}, {bind : {text : '©{serviceInfo.tf_copyrightOwner}'}}]});

        以過以上修改，就可以完成系統的top 和  bottom中一些資訊的更新的。啟動tomcat ,在瀏覽器中打入：http://localhost:8888/app/，會產生如下介面：

      其中的系統名稱，使用者單位及操作員，服務單位及連絡方式都是從後台取過來的。另外單擊“電子郵件”那個連結，可以直接轉到發送郵件的程式。


        下一節中把菜單更新一下，發布原始碼。