ExtJS學習：MVC模式案例（四）

      通過ExtJS案例系列教程的前三講，我們基本實現了MVC模式布局ExtJS項目的目的，並且在瀏覽器中也可以看到最為常見的網頁布局結構。但是，作為WEB開發人員，並不是能夠實現網頁布局就算是完成任務了，我們還需要實現一定的功能。在這一講中，我們將實現當點擊ExtJS菜單節點的時候，網頁主題部分顯示相對應的內容。

      本講我們不會添加新的檔案，只是對原來的檔案進行修改即可。前面我們說過，控制器的主要作用是監聽事件，控制邏輯。所以，我們今天主要修改demoController.js這個檔案，為我們的項目添加切換頁面的功能。目前我們demoController.js檔案的代碼為：

Ext.define('Demo.controller.demoController', {    extend: 'Ext.app.Controller',    views: ['Viewport','menuTree'],    stores: ['menuStore'],    model: ['menuModel']});

      首先我們需要對menuTree組件的滑鼠點擊事件進行監聽，修改後的代碼：

Ext.define('Demo.controller.demoController', {    extend: 'Ext.app.Controller',    views: ['Viewport','menuTree'],    stores: ['menuStore'],    model: ['menuModel'],    //通過init函數來監聽視圖事件，控制視圖與控制器的互動    init: function() {        //init函數通過this.control來負責監聽        this.control({                        //被監聽的組件的別名            'menutree': {                //監聽滑鼠點擊事件，點擊後調用changePage方法                itemclick: this.changePage,            }        });    },    changePage:function(){        alert('success');    }});

      重新整理頁面，點擊菜單幾點，彈出success說明我們監聽事件成功。下面我們繼續修改changePage方法，實現對主體內容部分頁面的切換功能。demoController.js代碼如下：

Ext.define('Demo.controller.demoController', {    extend: 'Ext.app.Controller',    views: ['Viewport','menuTree'],    stores: ['menuStore'],    model: ['menuModel'],    //通過init函數來監聽視圖事件，控制視圖與控制器的互動    init: function() {        //init函數通過this.control來負責監聽        this.control({            //被監聽的組件的別名            'menutree': {                //監聽滑鼠點擊事件，點擊後調用changePage方法                itemclick: this.changePage,            }        });    },    changePage:function(view, rec, item, index, e){        //擷取url地址        var url = rec.get('url');        //擷取當前節點資訊        var title = rec.get('text');        //將主體內容部分的url地址指定為我們擷取到的url        Ext.getDom('contentIframe').src = url;        //將主體內容框的標題設定為我們擷取的節點資訊        Ext.getCmp('mainContent').setTitle(title);    }});

      通過對changePage方法的修改，重新整理頁面，當我們再次點擊節點的時候，右側主體內容部分將顯示對應url的頁面資訊，大功告成。
      今天我們實現了頁面切換的功能，下一講我們將講解如何?右鍵菜單。

文章來源：ITLee部落格

原文地址：http://www.itlee.name/qianduan/extjs/491.html/