ExtJS如何实现下拉树形菜单的效果。据李坏在网上查阅各位大牛在实现该功能的方法时，发现很多人都是自定义一个类库来实现该功能。其实在官方下载的ExtJS版本中已为我们提供了TreePicker.js类库，就是来实现下拉树形菜单的，下面李坏通过一个简单的Demo，为大家抛砖引玉：
1.搭建ExtJS开发环境，目录结构如下：
李坏这里采用的ExtJS4.x MVC模式的开发方式，下面给出各个文件的代码，这里不做详细解释（如果对ExtJS的mvc模式不熟悉的童鞋
文件index.html：
| 代码如下 | 复制代码 |
|
<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： Ext.Loader.setConfig({ 文件Controller.js： Ext.define('Demo.controller.Controller', { 文件Viewport.js： Ext.define('Demo.view.Viewport', { |
|
到这里我们的开发环境搭建完毕，访问页面，得到一个空表单，效果如下：
2.获取TreePicker类库，在项目中加载该类
在extjs4.2 examplesux路径下，找到TreePicker.js文件，将该文件放到view文件夹下，目录结构如下：下拉菜单文件结构目录图" width="245" height="237" size-full="" src="http://www.111cn.net/notfound.jpg" _fcksavedurl="http://www.111cn.net/notfound.jpg" />
打开TreePicker.js文件，修改代码（该文件的第一行代码）：
打开TreePicker.js文件，修改代码（该文件的第一行代码）：
Ext.define('Ext.ux.TreePicker', {
为：
Ext.define('Demo.view.TreePicker', {
注：这里Demo是命名空间，根据自己的实际情况修改。
在Controller中加载TreePicker类库，修改Controller.js后的代码为
| 代码如下 | 复制代码 |
| Ext.define('Demo.controller.Controller', { extend: 'Ext.app.Controller', views:[ 'Viewport', 'TreePicker' ] }); |
|
3.在Viewport中定义下拉菜单组件，代码如下：
| 代码如下 | 复制代码 |
|
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' } } }) }] }] }); |
|
效果图：
说明：
在定义TreePicker组件时，store数据集必须在view视图中定义，不能单独定义store文件，否则不能正常显示，这里是跟常规定义树形菜单组件不同的地方，需要注意！