在演示應用中，我們已經創建好了viewport，并為之添加了一個菜單樹。但也僅僅是這樣，點擊樹或應用的其他地方獲得不到任何響應。這個演示應用還是一個死的應用。

接下來，我們讓這個應用活起來。

首先，給樹添加一個點擊事件。以前的做法是使用listener屬性，添加事件監聽及處理函數。現在的做法也是采用了類似的方法，修改MenuController.js:

Ext.define('demo.controller.MenuController', {extend: 'Ext.app.Controller',stores: ['MenuStore'],model: ['MenuModel'],views: ['TreeMenu'],init: function(){this.control({'treemenu' : {itemclick: this.treeHandle}});},treeHandle: function(view, record){alert(record.data.text);}});

我們使用了controller的init函數。init函數在應用啟動時就開始執行，通常它會和control函數一起使用來實現事件的監聽和處理。在control函數中我們再次使用了選擇器以找到要添加事件的對象。

點擊樹的節點，效果如下：

實現了事件的響應還不夠。在平時的開發中經常需要實現的功能是：點擊左側菜單，在右側內容面板中做出適當響應。

為了實現這個目標，我們先對json數據及model做些調整。

修改后的menu.json:

{children: [{id: 1,text: '用戶管理',leaf: false,expanded: true,children: [{id: 11,pid: 1,text: '角色管理',leaf: true},{id: 12,pid: 1,text: '信息管理',leaf: true}]},{id: 2,text: '系統管理',leaf: false,expanded: true,children: [{id: 21,pid: 2,text: '數據字典管理',leaf: true},{id: 22,pid: 2,text: '日志管理',leaf: true}]}] }

我們在json數據中添加了id和pid屬性。相應的model也要做出調整。MenuModel.js：

Ext.define('demo.model.MenuModel', {extend: 'Ext.data.Model',fields: ['id', 'pid', 'text', 'leaf'] });

再添加一個內容視圖Content.js：

Ext.define('demo.view.Content', {extend: 'Ext.panel.Panel',alias: 'widget.content',title: '系統內容',margins: '5 5 5 0',layout: 'form',defaults: {xtype: 'displayfield', labelAlign:'right', labelWidth:120} });

接下來，繼續對MenuController作出調整：

Ext.define('demo.controller.MenuController', {extend: 'Ext.app.Controller',stores: ['MenuStore'],model: ['MenuModel'],views: ['TreeMenu'],refs: [{, selector:'content'}],init: function(){this.control({'treemenu' : {itemclick: this.treeHandle}});},treeHandle: function(view, record){content.removeAll();content.add({fieldLabel: 'ID',value: record.data.id},{fieldLabel: 'TEXT',value: record.data.text});}});

?

調整的地方有兩處：使用了refs屬性，修改了點擊事件響應函數treeHandle。需要說明下的是refs屬性。使用refs屬性可以獲取對象的引用。在上面的配置中“refs: [{ref:'content', selector:'content'}]”產生了一個getContent()方法，這個方法會去尋找選擇器‘content’對應的對象。

?

看一下運行效果：

點擊左側的菜單樹，在右側的內容面板中會有相應的提示。

效果還是很簡單。不過了解了這些，應該可以自己動手去實現應用了。

關于MVC的學習手記可以于此告終了。

?

項目代碼下載：http://download.csdn.net/detail/tianxiexingyun/7405471

轉載于:https://www.cnblogs.com/amunote/p/3754204.html

總結

以上是生活随笔為你收集整理的ExtJS MVC 学习手记3的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。