extjs tree下拉列表_Extjs中ComboBoxTree实现的下拉框树效果(自写)_extjs

最近涉及到的一个项目中，需要实现ComboBoxTree的效果，首先，看看效果吧……

在Extjs中是没有这种效果的，所以得自己写，在网络上看了看别人的资料，自己再总结了一下，修改了一下，代码如下：

Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, {

constructor: function (cfg) {

cfg = cfg || {};

Ext.ux.TreeCombo.superclass.constructor.call(this, Ext.apply({

maxHeight: 300,

editable: false,

mode: 'local',

triggerAction: 'all',

rootVisible: false,

selectMode: 'all'

}, cfg));

},

store: new Ext.data.SimpleStore({

fields: [],

data: [[]]

}),

// 重写onViewClick，使展开树结点是不关闭下拉框

onViewClick: function (doFocus) {

var index = this.view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index);

if (r) {

this.onSelect(r, index);

}

if (doFocus !== false) {

this.el.focus();

}

},

tree: null,

// 隐藏值

hiddenValue: null,

getHiddenValue: function () {

return this.hiddenValue;

},

getValue: function () { //增加适用性，与原来combo组件一样

return this.hiddenValue;

},

setHiddenValue: function (code, dispText) {

this.setValue(code);

Ext.form.ComboBox.superclass.setValue.call(this, dispText);

this.hiddenValue = code;

},

initComponent: function () {

var _this = this;

var tplRandomId = 'deptcombo_' + Math.floor(Math.random() * 1000) + this.tplId

this.tpl = "

"

this.tree = new Ext.tree.TreePanel({

border: false,

enableDD: false,

enableDrag: false,

rootVisible: _this.rootVisible || false,

autoScroll: true,

trackMouseOver: true,

height: _this.maxHeight,

lines: true,

singleExpand: true,

root: new Ext.tree.AsyncTreeNode({

id: _this.rootId,

text: _this.rootText,

iconCls: 'ico-root',

expanded: true,

leaf: false,

border: false,

draggable: false,

singleClickExpand: false,

hide: true

}),

loader: new Ext.tree.TreeLoader({

nodeParameter: 'ID',

requestMethod: 'GET',

dataUrl: _this.url

})

});

this.tree.on('click', function (node) {

if ((_this.selectMode == 'leaf' && node.leaf == true) || _this.selectMode == 'all') {

if (_this.fireEvent('beforeselect', _this, node)) {

_this.fireEvent('select', _this, node);

}

}

});

this.on('select', function (obj, node) {

var dispText = node.text;

var code = node.id;

obj.setHiddenValue(code, dispText);

obj.collapse();

});

this.on('expand', function () {

this.tree.render(tplRandomId);

});

Ext.ux.TreeCombo.superclass.initComponent.call(this);

}

})

Ext.reg("treecombo", Ext.ux.TreeCombo);

之后呢，在主页中添加Extjs类库

其中，login.js的代码如下：

/* File Created: 五月 27, 2013 */

Ext.onReady(function () {

var _window = new Ext.Window({

title: "查询条件",

renderTo: Ext.getBody(),

frame: true,

plain: true,

buttonAlign: "center",

closeAction: "hide",

maximizable: true,

closable: true,

bodyStyle: "padding:20px",

width: 350,

height: 300,

layout: "form",

lableWidth: 110,

defaults: { xtype: "textfield", width: 180 },

items: [

{

fieldLabel: "案件编号",

anchor: "100