ExtJS学习：MVC模式案例（三） | 李坏博客

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

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

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

02	extend: 'Ext.tree.Panel',

03	alias: 'widget.menutree',

04	border: false,

05	//规定锚链接地址的显示区域

06	hrefTarget: 'mainContent',

07

//是否显示根节点

08	rootVisible: false,

09

//数据集

10	store: 'menuStore',

11

//菜单样式

12	bodyStyle: {

13	background: '#ffc',

14	padding: '10px'

15

}

16

});

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

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

02	extend: 'Ext.data.Model',

03

fields:[

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

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

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

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

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

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

10

]

11

});

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

01	Ext.define("Demo.store.menuStore",{

02	extend:'Ext.data.TreeStore',

03	defaultRoodId:'root',

04	requires: 'Demo.model.menuModel',

05	model: 'Demo.model.menuModel',

06

proxy:{

07	type:'ajax',

08	url:'./server/data.json',

09	reader:'json',

10	autoLoad:true

11

}

12

});

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

01

[

02	{"id":"2",

03	"pid":"1",

04	"text":"用户管理",

05	"leaf":"0",

06	"url":"http:\/\/www.",

07	"children":[{

08

"id":"5",

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

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

});

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

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

如非特殊说明，文章均为ITLee原创，转载请注明原文地址：http://www./qianduan/extjs/481.html/