ExtJS4实现下拉树形结构复选框

ExtJS 4实现下拉树并支持复选 在 ExtJS 4 框架中，实现树形结构的下拉框，并支持多选、复选，是一个非常实用的功能。下面，我们将详细介绍如何实现该功能。 首先，需要定义一个组件，继承自 `Ext.form.field.Picker`，并添加相应的配置项。该组件将被用来渲染树形结构的下拉框。代码如下： ```javascript Ext.define('Ext.ux.comboboxtree',{ extend:'Ext.form.field.Picker', xtype:'comboboxtree', triggerCls:Ext.baseCSSPrefix+'form-arrow-trigger', config:{ displayField:null, columns:null, rootVisible:true, selectOnTab:true, firstSelected:false, maxPickerWidth:285, maxPickerHeight:250, minPickerHeight:150 }, editable:false, initComponent:function(){ var me=this; me.callParent(arguments); this.addEvents('select'); me.store.on('load',me.onLoad,me); }, createPicker:function(){ var me=this, picker=Ext.create('Ext.tree.Panel',{ store:me.store, floating:true, hidden:true, width:me.maxPickerWidth, displayField:me.displayField, columns:me.columns, maxHeight:me.maxTreeHeight, shadow:false, rootVisible:me.rootVisible, manageHeight:false, listeners:{ itemclick:Ext.bind(me.onItemClick,me) }, viewConfig:{ listeners:{ render:function(view){ view.getEl().on('keypress',me.onPickerKeypress,me); } } } }), view=picker.getView(); view.on('render',me.setPickerViewStyles,me); if(Ext.isIE9&&Ext.isStrict){ // IE9下需要特殊处理 } } }); ``` 在上面的代码中，我们定义了一个名为 `Ext.ux.comboboxtree` 的组件，该组件继承自 `Ext.form.field.Picker`。我们添加了多个配置项，例如 `displayField`、`columns`、`rootVisible` 等，以便控制树形结构的渲染。同时，我们还添加了 `initComponent` 方法，以便在组件初始化时执行相应的操作。 在 `createPicker` 方法中，我们创建了一个 `Ext.tree.Panel` 实例，并将其用作树形结构的渲染容器。我们还添加了多个事件监听器，以便在树形结构中捕捉到用户的交互操作。 在使用该组件时，需要将其引入到具体的模块中，并进行相应的配置。例如： ```javascript Ext.create('Ext.ux.comboboxtree',{ renderTo:Ext.getBody(), store:Ext.create('Ext.data.TreeStore',{ root:{ text:'Root Node', children:[ {text:'Child Node 1',leaf:true}, {text:'Child Node 2',leaf:true}, {text:'Child Node 3',leaf:true} ] } }), displayField:'text', columns:[ {header:'Text',dataIndex:'text',width:200} ], rootVisible:true, selectOnTab:true }); ``` 在上面的代码中，我们创建了一个 `Ext.ux.comboboxtree` 实例，并将其渲染到页面上。我们还配置了树形结构的数据源、显示字段、列配置等。 通过使用 `Ext.ux.comboboxtree` 组件，我们可以轻松地实现树形结构的下拉框，并支持多选、复选等功能。该组件可以广泛应用于各种项目中，以满足不同业务需求。