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

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

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

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

1	Ext.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文件，为该文件添加以下代码：

1	Ext.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文件，添加下面的代码：

1	Ext.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文件，将菜单组件添加到整个视图中，修改后的代码如下：

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

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

2	extend:'Ext.app.Controller',

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

4	stores: ['menuStore'],

5	model: ['menuModel']

6

});

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

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