extjs2.0 ie8 下拉树_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;

},

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 : '地区',

maxHeight : 300,

value : '全国',

hiddenValue : '000000',

anchor : '95%'

}

不过通过formPanel.getForm().getValues()是获取不到treecombo的值的，需要自己手工调用

vartreeValue = treeCombo.getHiddenValue();

treeCombo是上面控件的实例

然后通过Ext.apply(formJSON,{areaName:treeValue})对用formJSON中的显示值进行替换

大小: 12 KB

1

顶

1

踩

分享到：

2011-08-03 21:04

浏览 3397

评论

2 楼

raywithu

2013-09-23

鸭子听雷公 写道

想看看到底是怎么实现的

上面的代码是齐全的。

1 楼

鸭子听雷公

2013-09-06

想看看到底是怎么实现的