在ExtJS案例系列教程的前兩講，我們了解了該案例的最終實現效果，并且在ExtJS學習：MVC模式案例（二）中我們添加Viewport.js和demoController.js兩個文件，實現了對整個網頁的基本布局。這一講使我們系列教程的第三講，主要實現網頁左側的樹形菜單部分，希望對入門級的WEB開發者提供一個引導的作用。

接下來，我們在view文件夾中添加一個mentTree.js文件，用來作為樹形菜單組件。為該文件添加以下代碼：

?

Ext.define('Demo.view.menuTree', {extend: 'Ext.tree.Panel',alias: 'widget.menutree',border: false,//規定錨鏈接地址的顯示區域hrefTarget: 'mainContent',//是否顯示根節點rootVisible: false,//數據集store: 'menuStore',//菜單樣式 bodyStyle: {background: '#ffc',padding: '10px'} });

?這樣我們就創建了一個菜單的組件，但是，現在我們的菜單還不能正常工作，因為菜單中還沒有填充數據。ExtJS4中我們用單獨的一個文件來創建數據模型和數據集，在創建數據集前我們首先創建數據模型。在app文件夾下創建model文件夾，并且在該文件夾下創建menuModel.js文件，為該文件添加以下代碼：

Ext.define('Demo.model.menuModel', { extend: 'Ext.data.Model', fields:[ {name:'id', type:'int'}, {name:'pid', type:'int'}, {name:'text', type:'varchar'}, //type為布爾型時，后面的默認值是必須寫的，要不會出錯 {name:'leaf', type:'boolean', defaultValue: true}, {name: 'url', type:'varchar'} ] });

?有了數據模型，接下來我們創建store文件夾，以及在該文件夾下創建menuStore.js文件，添加下面的代碼：

Ext.define("Demo.store.menuStore",{extend:'Ext.data.TreeStore',defaultRoodId:'root',requires: 'Demo.model.menuModel',model: 'Demo.model.menuModel',proxy:{type:'ajax',url:'./server/data.json',reader:'json',autoLoad:true} });

?數據集和數據模型都有了，那么我們怎么給菜單添加數據呢？一般情況下，菜單所需的數據都是有后臺服務器提供，因為我們這里主要講解ExtJS的知識，盡量不去涉及后端的東西，我們可以用json格式模擬后臺數據輸出。現在，我們在根目錄下創建server文件夾，在該文件夾下創建一個data.json的文件用來為前端提供數據：

[{"id":"2","pid":"1","text":"用戶管理","leaf":"0","url":"http:\/\/www.itlee.name","children":[{"id":"5","pid":"2","text":"基本信息","leaf":"1","url":"http:\/\/www.sogou.com","children":""},{"id":"11","pid":"2","text":"信息管理","leaf":"1","url":"http:\/\/www.sogou.com","children":""},{"id":"12","pid":"2","text":"添加用戶","leaf":"1","url":"http:\/\/www.sogou.com","children":""}]},{"id":"3","pid":"1","text":"產品管理","leaf":"0","url":"http:\/\/www.so.com","children":[{"id":"7","pid":"3","text":"產品信息","leaf":"1","url":"http:\/\/www.so.com","children":""},{"id":"8","pid":"3","text":"產品添加","leaf":"1","url":"http:\/\/www.so.com","children":""}]} ]

為了簡單起見，每個節點的url地址我們用簡單的網頁替代。萬事俱備，只差加載了。那么，怎么才能將我們寫好的菜單組件加載到我們的項目中呢？
??????首先，修改我們的Viewport.js文件，將菜單組件添加到整個視圖中，修改后的代碼如下：

Ext.define('Demo.view.Viewport', {extend: 'Ext.container.Viewport',//布局方式layout: 'border',items: [{title:'ExtJS案例',collapisble: true,region:'north',height: 100,html: '<br><center><font size=5>MVC模式實現的ExtJS案例</font><br><font size=2>源碼來源:ITLee博客</font></center>'},{title: '功能菜單',region: 'west',width: 180,split: true,collapisble: true,//這里是修改的部分 items:[{xtype: 'menutree'}]}, {id: 'mainContent',title: '主題內容顯示',layout: 'fit',region: 'center',collapisble: true,contentEl: 'contentIframe'}] });

接下來，修改demoController.js文件，實現對菜單組件的加載，修改后的代碼：

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

當我們點擊樹形節點的時候，發現右側主題部分并沒有顯示網頁內容，這是因為我們還沒有為節點添加監聽事件的原因。具體如何添加切換頁面的效果，下一講我們將會詳細講解。

文章來源：ITLee博客

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

?

轉載于:https://www.cnblogs.com/itleeblog/archive/2013/03/02/2939800.html

總結

以上是生活随笔為你收集整理的ExtJS学习：MVC模式案例（三）的全部內容，希望文章能夠幫你解決所遇到的問題。

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