在演示應(yīng)用中，我們已經(jīng)創(chuàng)建好了viewport，并為之添加了一個(gè)菜單樹。但也僅僅是這樣，點(diǎn)擊樹或應(yīng)用的其他地方獲得不到任何響應(yīng)。這個(gè)演示應(yīng)用還是一個(gè)死的應(yīng)用。

接下來(lái)，我們讓這個(gè)應(yīng)用活起來(lái)。

首先，給樹添加一個(gè)點(diǎn)擊事件。以前的做法是使用listener屬性，添加事件監(jiān)聽及處理函數(shù)。現(xiàn)在的做法也是采用了類似的方法，修改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函數(shù)。init函數(shù)在應(yīng)用啟動(dòng)時(shí)就開始執(zhí)行，通常它會(huì)和control函數(shù)一起使用來(lái)實(shí)現(xiàn)事件的監(jiān)聽和處理。在control函數(shù)中我們?cè)俅问褂昧诉x擇器以找到要添加事件的對(duì)象。

點(diǎn)擊樹的節(jié)點(diǎn)，效果如下：

實(shí)現(xiàn)了事件的響應(yīng)還不夠。在平時(shí)的開發(fā)中經(jīng)常需要實(shí)現(xiàn)的功能是：點(diǎn)擊左側(cè)菜單，在右側(cè)內(nèi)容面板中做出適當(dāng)響應(yīng)。

為了實(shí)現(xiàn)這個(gè)目標(biāo)，我們先對(duì)json數(shù)據(jù)及model做些調(diào)整。

修改后的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: '系統(tǒng)管理',leaf: false,expanded: true,children: [{id: 21,pid: 2,text: '數(shù)據(jù)字典管理',leaf: true},{id: 22,pid: 2,text: '日志管理',leaf: true}]}] }

我們?cè)趈son數(shù)據(jù)中添加了id和pid屬性。相應(yīng)的model也要做出調(diào)整。MenuModel.js：

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

再添加一個(gè)內(nèi)容視圖Content.js：

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

接下來(lái)，繼續(xù)對(duì)MenuController作出調(diào)整：

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});}});

?

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

?

看一下運(yùn)行效果：

點(diǎn)擊左側(cè)的菜單樹，在右側(cè)的內(nèi)容面板中會(huì)有相應(yīng)的提示。

效果還是很簡(jiǎn)單。不過了解了這些，應(yīng)該可以自己動(dòng)手去實(shí)現(xiàn)應(yīng)用了。

關(guān)于MVC的學(xué)習(xí)手記可以于此告終了。

?

項(xiàng)目代碼下載：http://download.csdn.net/detail/tianxiexingyun/7405471

轉(zhuǎn)載于:https://www.cnblogs.com/amunote/p/3754204.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。