自定义ExtJS下拉树与下拉表格控件（附源码）

简介

Ext JS官方示例中通常仅提供基础的下拉列表控件，但在真实业务场景下，下拉树（ComboTreeBox）与下拉表格（ComboGridBox）才是日常开发中真正高频需要的组件。对于刚接触Ext框架的开发者而言，自定义组合控件往往感觉无从下手。实际上，只要多次研读官方源码，很多看似复杂的实现机制便会豁然开朗。下面直接来看下拉树的完整实现代码：

复制代码 下拉树核心实现代码如下：

Ext.define('ComboTreeBox',{ extend : 'Ext.form.field.ComboBox', multiSelect : true, createPicker : function(){ var me = this; //创建树控件 var picker = Ext.create('Ext.tree.Panel', { store: me.store, rootVisible: false, selModel: { mode: me.multiSelect ? 'SIMPLE' : 'SINGLE' }, floating: true, hidden: true, focusOnToFront: false }); //注册事件用于选择用户选择的值 me.mon(picker, { itemclick: me.onItemClick, refresh: me.onListRefresh, scope: me }); me.mon(picker.getSelectionModel(), { beforeselect: me.onBeforeSelect, beforedeselect: me.onBeforeDeselect, selectionchange: me.onListSelectionChange, scope: me }); this.picker = picker; return picker; }, onItemClick: function(picker, record){ /* * If we're doing single selection, the selection change events won't fire when * clicking on the selected element. Detect it here. */ var me = this, selection = me.picker.getSelectionModel().getSelection(), valueField = me.valueField; if (!me.multiSelect && selection.length) { if (record.get(valueField) === selection[0].get(valueField)) { // Make sure we also update the display value if it's only partial me.displayTplData = [record.data]; me.setRawValue(me.getDisplayValue()); me.collapse(); } } } });

下拉树的实现逻辑相当清晰：核心思路是继承 Ext.form.field.ComboBox，然后重写 createPicker 方法，将默认的下拉列表替换为树面板（Tree Panel）。同理，下拉表格的构建也遵循完全相同的设计模式。

复制代码 下拉表格核心实现代码如下：

Ext.define('ComboGridBox',{ extend : 'Ext.form.field.ComboBox', multiSelect : true, createPicker : function(){ var me = this; var picker = Ext.create('Ext.grid.Panel', { title : '下拉表格', store: me.store, frame : true, resizable : true, columns : [{ text : '#ID', dataIndex : 'id' },{ text : '名称' , dataIndex : 'name' },{ text : '描述' , dataIndex : 'desc' }], selModel: { mode: me.multiSelect ? 'SIMPLE' : 'SINGLE' }, floating: true, hidden: true, width : 300, columnLines : true, focusOnToFront: false }); me.mon(picker, { itemclick: me.onItemClick, refresh: me.onListRefresh, scope: me }); me.mon(picker.getSelectionModel(), { beforeselect: me.onBeforeSelect, beforedeselect: me.onBeforeDeselect, selectionchange: me.onListSelectionChange, scope: me }); this.picker = picker; return picker; }, onItemClick: function(picker, record){ /* * If we're doing single selection, the selection change events won't fire when * clicking on the selected element. Detect it here. */ var me = this, selection = me.picker.getSelectionModel().getSelection(), valueField = me.valueField; if (!me.multiSelect && selection.length) { if (record.get(valueField) === selection[0].get(valueField)) { // Make sure we also update the display value if it's only partial me.displayTplData = [record.data]; me.setRawValue(me.getDisplayValue()); me.collapse(); } } }, matchFieldWidth : false, onListSelectionChange: function(list, selectedRecords) { var me = this, isMulti = me.multiSelect, hasRecords = selectedRecords.length > 0; // Only react to selection if it is not called from setValue, and if our list is // expanded (ignores changes to the selection model triggered elsewhere) if (!me.ignoreSelection && me.isExpanded) { if (!isMulti) { Ext.defer(me.collapse, 1, me); } /* * Only set the value here if we're in multi selection mode or we ha ve * a selection. Otherwise setValue will be called with an empty value * which will cause the change event to fire twice. */ if (isMulti || hasRecords) { me.setValue(selectedRecords, false); } if (hasRecords) { me.fireEvent('select', me, selectedRecords); } me.inputEl.focus(); } console.log(me.getValue()); }, doAutoSelect: function() { var me = this, picker = me.picker, lastSelected, itemNode; if (picker && me.autoSelect && me.store.getCount() > 0) { // Highlight the last selected item and scroll it into view lastSelected = picker.getSelectionModel().lastSelected; itemNode = picker.view.getNode(lastSelected || 0); if (itemNode) { picker.view.highlightItem(itemNode); picker.view.el.scrollChildIntoView(itemNode, false); } } } });

下拉表格同样采用继承 Ext.form.field.ComboBox 并重写 createPicker 方法的方式实现，区别在于创建的组件从树面板替换为网格面板（Grid Panel）。两者的核心逻辑完全一致，均涵盖事件绑定、选择模型处理以及值同步等关键环节。

开发下拉树与下拉表格控件，一旦深入理解Ext JS的组件继承体系与运行机制，实际上就像一层窗户纸——轻轻捅破，便会发现一切如此简单。

控件效果

实例下载

本实例中的资源为MyEclipse项目工程，导入开发环境后即可直接运行。使用时需自行添加Ext JS的JavaScript库及CSS样式文件，实例包中不包含Ext的基础依赖文件。

点击此处获取完整实例下载地址