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

 在ExtJS MVC案例系列教程的前两讲，我们了解了该案例的最终实现效果，并且在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文件，将菜单组件添加到整个视图中，修改后的代码如下：

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

02	extend: 'Ext.container.Viewport',

03

//布局方式

04	layout: 'border',

05

items: [{

06	title:'ExtJS案例',

07	collapisble: true,

08	region:'north',

09	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文件，实现对菜单组件的加载，修改后的代码：

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

2	extend: 'Ext.app.Controller',

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

4	stores: ['menuStore'],

5	model: ['menuModel']

6

});

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

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