ExtJS学习：MVC模式案例（三）

来源：互联网发布：淘宝gta5刷钱靠谱吗编辑：程序博客网时间：2024/06/01 13:17

在ExtJS MVC案例系列教程的前两讲，我们了解了该案例的最终实现效果，并且在ExtJS学习：MVC模式案例（二）中我们添加Viewport.js和demoController.js两个文件，实现了对整个网页的基本布局。这一讲使我们系列教程的第三讲，主要实现网页左侧的树形菜单部分，希望对入门级的WEB开发者提供一个引导的作用。

到目前为止，我们的文件结构如下图：

接下来，我们在view文件夹中添加一个mentTree.js文件，用来作为树形菜单组件。为该文件添加以下代码：

1Ext.define('Demo.view.menuTree', {
2    extend:'Ext.tree.Panel',
3    alias:'widget.menutree',
4    border:false,
5    //规定锚链接地址的显示区域
6    hrefTarget:'mainContent',
7    //是否显示根节点
8    rootVisible:false,
9    //数据集
10    store:'menuStore',
11    //菜单样式
12    bodyStyle: {
13        background:'#ffc',
14        padding:'10px'
15    }
16});

这样我们就创建了一个菜单的组件，但是，现在我们的菜单还不能正常工作，因为菜单中还没有填充数据。ExtJS4中我们用单独的一个文件来创建数据模型和数据集，在创建数据集前我们首先创建数据模型。在app文件夹下创建model文件夹，并且在该文件夹下创建menuModel.js文件，为该文件添加以下代码：

1Ext.define('Demo.model.menuModel', {

2    extend:'Ext.data.Model',

3    fields:[

4        {name:'id', type:'int'},

5        {name:'pid', type:'int'},

6        {name:'text', type:'varchar'},

7        //type为布尔型时，后面的默认值是必须写的，要不会出错

8        {name:'leaf', type:'boolean', defaultValue: true},

9        {name:'url', type:'varchar'}

10    ]

11});

有了数据模型，接下来我们创建store文件夹，以及在该文件夹下创建menuStore.js文件，添加下面的代码：

1Ext.define("Demo.store.menuStore",{
2    extend:'Ext.data.TreeStore',
3    defaultRoodId:'root',
4    requires:'Demo.model.menuModel',
5    model:'Demo.model.menuModel',
6    proxy:{
7        type:'ajax',
8        url:'./server/data.json',
9        reader:'json',
10        autoLoad:true
11    }
12});

数据集和数据模型都有了，那么我们怎么给菜单添加数据呢？一般情况下，菜单所需的数据都是有后台服务器提供，因为我们这里主要讲解ExtJS的知识，尽量不去涉及后端的东西，我们可以用json格式模拟后台数据输出。现在，我们在根目录下创建server文件夹，在该文件夹下创建一个data.json的文件用来为前端提供数据：

1[
2    {"id":"2",
3    "pid":"1",
4    "text":"用户管理",
5    "leaf":"0",
6    "url":"http:\/\/www.lihuai.net",
7    "children":[{
8        "id":"5",
9        "pid":"2",
10        "text":"基本信息",
11        "leaf":"1",
12        "url":"http:\/\/www.sogou.com",
13        "children":""},{
14        "id":"11",
15        "pid":"2",
16        "text":"信息管理",
17        "leaf":"1",
18        "url":"http:\/\/www.sogou.com",
19        "children":""},{
20        "id":"12",
21        "pid":"2",
22        "text":"添加用户",
23        "leaf":"1",
24        "url":"http:\/\/www.sogou.com",
25        "children":""}]},
26    {"id":"3",
27    "pid":"1",
28    "text":"产品管理",
29    "leaf":"0",
30    "url":"http:\/\/www.so.com",
31    "children":[{
32        "id":"7",
33        "pid":"3",
34        "text":"产品信息",
35        "leaf":"1",
36        "url":"http:\/\/www.so.com",
37        "children":""},{
38        "id":"8",
39        "pid":"3",
40        "text":"产品添加",
41        "leaf":"1",
42        "url":"http:\/\/www.so.com",
43        "children":""}]}
44]

为了简单起见，每个节点的url地址我们用简单的网页替代。万事俱备，只差加载了。那么，怎么才能将我们写好的菜单组件加载到我们的项目中呢？
首先，修改我们的Viewport.js文件，将菜单组件添加到整个视图中，修改后的代码如下：

1Ext.define('Demo.view.Viewport', {

2    extend:'Ext.container.Viewport',

3    //布局方式

4    layout:'border',

5    items: [{

6        title:'ExtJS案例',

7        collapisble:true,

8        region:'north',

9        height: 100,

10        html:'<br><center><font size=5>MVC模式实现的ExtJS案例</font><br><font size=2>源码来源:ITLee博客</font></center>'

11    },{

12        title:'功能菜单',

13        region:'west',

14        width: 180,

15        split:true,

16        collapisble:true,

17                //这里是修改的部分

18        items:[{

19            xtype:'menutree'

20        }]

21    }, {

22        id:'mainContent',

23        title:'主题内容显示',

24        layout:'fit',

25        region:'center',

26        collapisble:true,

27        contentEl:'contentIframe'

28    }]

29});   接下来，修改demoController.js文件，实现对菜单组件的加载，修改后的代码：

1Ext.define('Demo.controller.demoController', {

2    extend:'Ext.app.Controller',

3    views: ['Viewport','menuTree'],

4    stores: ['menuStore'],

5    model: ['menuModel']

6});

现在，用浏览器查看我们的案例，左侧已经显示出菜单栏了，效果如下图：

当我们点击树形节点的时候，发现右侧主题部分并没有显示网页内容，这是因为我们还没有为节点添加监听事件的原因。具体如何添加切换页面的效果，下一讲我们将会详细讲解。

0 0