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/