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

在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/