在继ExtJS如何实现密码验证的功能之后,李坏给大家分享一下,ExtJS如何实现下拉树形菜单的效果。据李坏在网上查阅各位大牛在实现该功能的方法时,发现很多人都是自定义一个类库来实现该功能。其实在官方下载的ExtJS版本中已为我们提供了TreePicker.js类库,就是来实现下拉树形菜单的,下面李坏通过一个简单的Demo,为大家抛砖引玉:

1.搭建ExtJS开发环境,目录结构如下:

extjs 案例目录结构
      李坏这里采用的ExtJS4.x MVC模式的开发方式,下面给出各个文件的代码,这里不做详细解释(如果对ExtJS的mvc模式不熟悉的童鞋,可参考ExtJS4.x MVC模式案例教程):
文件index.html:

<!-- 
	作者:李坏
	URL:http://www.lihuai.net
 -->
<html>
<head>
    <title>ExtJS4 下拉树菜单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="extjs4.2/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs4.2/bootstrap.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

文件app.js:

/*
	作者:李坏
	URL:http://www.lihuai.net
*/
Ext.Loader.setConfig({
    enabled: true
 });
Ext.application({
    name: 'Demo',
    appFolder: 'app',
    controllers: ['Controller'],
    autoCreateViewport: true
});

文件Controller.js:

/*
	作者:李坏
	URL:http://www.lihuai.net
*/
Ext.define('Demo.controller.Controller', {
    extend: 'Ext.app.Controller',
    views:[
    	'Viewport'
    ]
});

文件Viewport.js:

Ext.define('Demo.view.Viewport', {
	extend: 'Ext.container.Viewport',
	margin:'100 0 0 200',
	items:[{
		xtype:'form',
		title:'下拉树菜单',
		height: 500,
		width: 700
	}];
});

      到这里我们的开发环境搭建完毕,访问页面,得到一个空表单,效果如下:
extjs下拉树形菜单案例图 (2)

2.获取TreePicker类库,在项目中加载该类

      在extjs4.2 \examples\ux路径下,找到TreePicker.js文件,将该文件放到view文件夹下,目录结构如下:
extjs树形下拉菜单文件结构目录图
      打开TreePicker.js文件,修改代码(该文件的第一行代码):

Ext.define('Ext.ux.TreePicker', {

为:

Ext.define('Demo.view.TreePicker', {

      注:这里Demo是命名空间,根据自己的实际情况修改。
      在Controller中加载TreePicker类库,修改Controller.js后的代码为:

/*
	作者:李坏
	URL:http://www.lihuai.net
*/
Ext.define('Demo.controller.Controller', {
    extend: 'Ext.app.Controller',
    views:[
    	'Viewport',
        'TreePicker'
    ]
});

3.在Viewport中定义下拉菜单组件,代码如下:

/*
	作者:李坏
	URL:http://www.lihuai.net
*/
Ext.define('Demo.view.Viewport', {
	extend: 'Ext.container.Viewport',
	margin:'100 0 0 200',
	items:[{
		xtype:'form',
		title:'下拉树菜单',
		height: 500,
		width: 700,
		items:[{
			xtype: 'treepicker',
			fieldLabel: '下拉树',
			width: 400,
			labelWidth: 60,
			margin: '100 0 0 150',
			displayField: 'text',
			rootVisible: false,
			value: '',
			minPickerHeight: 200,
			store: Ext.create('Ext.data.TreeStore',{
				fields: ['id','text'],
				root: {
					text: '天朝部门',
					expanded: true
				},
				proxy: {
					type: 'ajax',
					url: 'app/data/tree.json',
					reader: {
						type: 'json'
					}
				}
			})
		}]
	}]
});

效果图:
extjs 下拉树菜单案例效果图
说明:
      在定义TreePicker组件时,store数据集必须在view视图中定义,不能单独定义store文件,否则不能正常显示,这里是跟常规定义树形菜单组件不同的地方,需要注意!

源码下载

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

  1. modify 说道:

    后台传值后,树显示默认的选中一个选项, 这个怎么实现

  2. 哈秀时尚 说道:

    支持,绝度要支持

  3. 就爱智能 说道:

    顺藤摸瓜进来了,不怎么懂,支持李家人!