ExtJS4.x 如何实现下拉树形菜单的效果

时间：2013-09-07 编辑：简简单单来源：一聚教程网

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

1.搭建ExtJS开发环境，目录结构如下：

李坏这里采用的ExtJS4.x MVC模式的开发方式，下面给出各个文件的代码，这里不做详细解释（如果对ExtJS的mvc模式不熟悉的童鞋

文件index.html：

代码如下

复制代码

    ExtJS4 下拉树菜单

文件app.js：

Ext.Loader.setConfig({
    enabled: true
});
Ext.application({
    name: 'Demo',
    appFolder: 'app',
    controllers: ['Controller'],
    autoCreateViewport: true
});

文件Controller.js：

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
}];
});

到这里我们的开发环境搭建完毕，访问页面，得到一个空表单，效果如下：

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

在extjs4.2 examplesux路径下，找到TreePicker.js文件，将该文件放到view文件夹下，目录结构如下：
下拉菜单文件结构目录图" size-full="" src="/notfound.jpg" _fcksavedurl="/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文件，否则不能正常显示，这里是跟常规定义树形菜单组件不同的地方，需要注意！

上一个： ExtJS4 MVC模式入门级开发案例
下一个： ExtJS4.x 如何实现密码验证功能

推荐专题

最新下载

热门教程

ExtJS4.x 如何实现下拉树形菜单的效果

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程