直接上代码：
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
想看看到底是怎么实现的
