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

【www.bbyears.com--extjs】

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

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

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

文件index.html：

 代码如下

   
   
    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>

文件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文件夹下，目录结构如下：

      打开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文件，否则不能正常显示，这里是跟常规定义树形菜单组件不同的地方，需要注意！

 

本文来源：http://www.bbyears.com/wangyezhizuo/42719.html