直接上代碼：

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，使展開樹結(jié)點是不關(guān)閉下拉框

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;

},

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,

leaf : false,

border : false,

draggable : false,

singleClickExpand : false,

hide : true

}),

loader : new Ext.tree.TreeLoader({

dataUrl : _this.url

})

});

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

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

// if (node.parentNode && node.parentNode.attributes.id != '000000') {

var dispText = node.text;

var code = node.id;

while (node.parentNode && node.parentNode.attributes.id != '000000') {

if (node.parentNode.text != dispText) {

dispText = node.parentNode.text + dispText;

}

node = node.parentNode;

}

_this.setHiddenValue(code, dispText);

_this.collapse();

}

});

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

this.tree.render(tplRandomId);

});

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

}

})

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

使用示例：

{

xtype : 'treecombo',

name : 'areaName',

tplId : 'tree_tpl',

rootVisible : true,

rootText : '全國',

url : 'loadArea',

fieldLabel : '地區(qū)',

maxHeight : 300,

value : '全國',

hiddenValue : '000000',

anchor : '95%'

}

不過通過formPanel.getForm().getValues()是獲取不到treecombo的值的，需要自己手工調(diào)用

vartreeValue = treeCombo.getHiddenValue();

treeCombo是上面控件的實例

然后通過Ext.apply(formJSON,{areaName:treeValue})對用formJSON中的顯示值進(jìn)行替換

大小: 12 KB

1

頂

1

踩

分享到：

2011-08-03 21:04

瀏覽 3397

評論

2 樓

raywithu

2013-09-23

鴨子聽雷公 寫道

想看看到底是怎么實現(xiàn)的

上面的代碼是齊全的。

1 樓

鴨子聽雷公

2013-09-06

想看看到底是怎么實現(xiàn)的

總結(jié)

以上是生活随笔為你收集整理的extjs2.0 ie8 下拉树_ExtJs下拉树的实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。