在ExtJS MVC案例系列教程的前两讲,我们了解了该案例的最终实现效果,并且在ExtJS学习:MVC模式案例(二)中我们添加Viewport.js和demoController.js两个文件,实现了对整个网页的基本布局。这一讲使我们系列教程的第三讲,主要实现网页左侧的树形菜单部分,希望对入门级的WEB开发者提供一个引导的作用。
      到目前为止,我们的文件结构如下图:
ExtJS案例文件结构图
      接下来,我们在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.lihuai.net",
	"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']
});

      现在,用浏览器查看我们的案例,左侧已经显示出菜单栏了,效果如下图:
Extjs mvc案例效果图
      当我们点击树形节点的时候,发现右侧主题部分并没有显示网页内容,这是因为我们还没有为节点添加监听事件的原因。具体如何添加切换页面的效果,下一讲我们将会详细讲解。
欢迎各位留言交流!

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

【技术交流,欢迎大家拍砖】

  1. 旭哥哥 说道:

    删掉默认值
    亲测有效

  2. 树显示 说道:

    树显示不出来什么情况

  3. 技术老何 说道:

    树的确出不来。不知道是哪边的问题

  4. jiftle 说道:

    树的确出不来。

  5. 别对我忽悠 说道:

    树是出不来,不知道哪里有问题

  6. 永不言败 说道:

    博主能不能上下源码呢方便学习和交流 ,请博主给我一份好不

  7. asdfasa 说道:

    有错误

  8. qsz 说道:

    树出不来,能指导下吗?

  9. meloggi 说道:

    你这个树出不来 我用调试 发现被传递了空字符串参数望博主 不吝赐教!!

  10. zebin 说道:

    哪里出错?出不来,树?

  11. zhiqian221 说道:

    我也是。。树出不来

  12. aa 说道:

    树不出来修改

  13. bia 说道:

    树不出来啊

  14. goods 说道:

    树出不来。。试过好几次了

  15. nia 说道:

    代码里有个单词拼写错了