|
通過ExtJS MVC案例系列教程的前三講，我們基本實(shí)現(xiàn)了MVC模式布局ExtJS項(xiàng)目的目的，并且在瀏覽器中也可以看到最為常見的網(wǎng)頁(yè)布局結(jié)構(gòu)。但是，作為WEB開發(fā)者，并不是能夠?qū)崿F(xiàn)網(wǎng)頁(yè)布局就算是完成任務(wù)了，我們還需要實(shí)現(xiàn)一定的功能。在這一講中，我們將實(shí)現(xiàn)當(dāng)點(diǎn)擊ExtJS菜單節(jié)點(diǎn)的時(shí)候，網(wǎng)頁(yè)主題部分顯示相對(duì)應(yīng)的內(nèi)容。
到目前為止，我們的文件結(jié)構(gòu)：
本講我們不會(huì)添加新的文件，只是對(duì)原來的文件進(jìn)行修改即可。前面我們說過，控制器的主要作用是監(jiān)聽事件，控制邏輯。所以，我們今天主要修改demoController.js這個(gè)文件，為我們的項(xiàng)目添加切換頁(yè)面的功能。目前我們demoController.js文件的代碼為：
1 | Ext.define('Demo.controller.demoController', { |
2 | extend: 'Ext.app.Controller', |
3 | views: ['Viewport','menuTree'], |
首先我們需要對(duì)menuTree組件的鼠標(biāo)點(diǎn)擊事件進(jìn)行監(jiān)聽，修改后的代碼：
01 | Ext.define('Demo.controller.demoController', { |
02 | extend: 'Ext.app.Controller', |
03 | views: ['Viewport','menuTree'], |
04 | stores: ['menuStore'], |
06 | //通過init函數(shù)來監(jiān)聽視圖事件，控制視圖與控制器的交互 |
08 | //init函數(shù)通過this.control來負(fù)責(zé)監(jiān)聽 |
12 | //監(jiān)聽鼠標(biāo)點(diǎn)擊事件，點(diǎn)擊后調(diào)用changePage方法 |
13 | itemclick: this.changePage, |
17 | changePage:function(){ |
刷新頁(yè)面，點(diǎn)擊菜單幾點(diǎn)，彈出success說明我們監(jiān)聽事件成功。下面我們繼續(xù)修改changePage方法，實(shí)現(xiàn)對(duì)主體內(nèi)容部分頁(yè)面的切換功能。demoController.js代碼如下：
01 | Ext.define('Demo.controller.demoController', { |
02 | extend: 'Ext.app.Controller', |
03 | views: ['Viewport','menuTree'], |
04 | stores: ['menuStore'], |
06 | //通過init函數(shù)來監(jiān)聽視圖事件，控制視圖與控制器的交互 |
08 | //init函數(shù)通過this.control來負(fù)責(zé)監(jiān)聽 |
12 | //監(jiān)聽鼠標(biāo)點(diǎn)擊事件，點(diǎn)擊后調(diào)用changePage方法 |
13 | itemclick: this.changePage, |
17 | changePage:function(view, rec, item, index, e){ |
19 | var url = rec.get('url'); |
20 | //獲取當(dāng)前節(jié)點(diǎn)信息 |
21 | var title = rec.get('text'); |
22 | //將主體內(nèi)容部分的url地址指定為我們獲取到的url |
23 | Ext.getDom('contentIframe').src = url; |
24 | //將主體內(nèi)容框的標(biāo)題設(shè)置為我們獲取的節(jié)點(diǎn)信息 |
25 | Ext.getCmp('mainContent').setTitle(title); |
通過對(duì)changePage方法的修改，刷新頁(yè)面，當(dāng)我們?cè)俅吸c(diǎn)擊節(jié)點(diǎn)的時(shí)候，右側(cè)主體內(nèi)容部分將顯示對(duì)應(yīng)url的頁(yè)面信息，大功告成。
今天我們實(shí)現(xiàn)了頁(yè)面切換的功能，下一講我們將講解如何實(shí)現(xiàn)右鍵菜單。
歡迎各位留言交流，共同進(jìn)步！
如非特殊說明，文章均為ITLee原創(chuàng)，轉(zhuǎn)載請(qǐng)注明原文地址： http://www./qianduan/extjs/491.html/
|
