1:最近有这个需求,就是ext下的combo下拉是树,网上的例子很多,封装的也很好,基本都可以满足下拉框下出现想要的树,但是我的使用情况是比如在用户编辑的时候,要把用户已经选择过的数值自动再赋值到下拉框内,比如之前选择了id为5的节点,那么编辑用户的时候combo中自动显示这个值
2:网上发现这样的例子不多,有一个是iteye上面写的,地址为http://zxlaiye.iteye.com/blog/1310556。经过测试这个里面有几个问题所在,并且有几个作者也没有说明白杂用,经过修改可以用了。
3:发个实例代码:
new Ext.ux.ComboBoxTree({
fieldLabel : '父菜单',
hiddenName : 'testTreeName',
value : 11,
height : 180,
width : 200,
dataUrl : PATH
+ '/do.php?mod=util&action=query_parent_department_tree',
nodePathUrl : PATH
+ '/do.php?mod=util&action=query_department_path&id=11',
rootVisible : false,
rootSelectable : false,
showFullPath : false,
allowBlank : false,
emptyText : '请选择'
})
其中hiddenName 是post过去的字段
dataUrl就是生成一般的树的路径了,这个都和平时一样,不一样的地方时多了个nodePathUrl,看这个我的例子中我给初始化的value为11,这个节点在我数据库中对应的父亲节点只推到最上的路径分别为/root/8/7/11 也就是说这个节点从刚才的路径利用treepanel的selectPath方法直接找到这个节点,然后把这个节点text对应到combo中,把value设置给name。之前这个问题是里面有个路径问题不可以找到,还有个地方时一个cu的函数的封装,cu函数就是请求nodePathUrl的。里面还有个问题是如果当前tree中没有root节点的话是对应不到的,总之我给修整好是可以用了,大家看源代码:
/**
* 自定义下拉树,支持初始化值时自动定位树节点。 还没有考虑性能问题。继承自Ext.form.ComboBox也很浪费。
* 代码中的cu.get()是自定义的异步请求方法。
*/
/*
* 例子 new Ext.ux.ComboBoxTree({ fieldLabel:'父菜单', hiddenName: 'parentId', value:
* this.modifyId ? '' : this.parentMenu.id, height: 180, dataUrl:
* 'sys/menu/getMenus.do', 就是获取一般tree的url nodePathUrl:
* 'sys/util/getEntityIdPath.do?c=sys.entity.Menu',获取需要默认选中的那个节点的路径parentId/parentId/.../被选中节点的id
* root: {id:'root', text:'根菜单', expanded: true}, rootVisible: true,
* rootSelectable: true, rootValue: null, showFullPath: true, allowBlank: false,
* });
*/
/**
* @author Linzongxue
* @create_date 2011-12-13
*/
Ext.ux.ComboBoxTree = Ext.extend(Ext.form.ComboBox, {
// 树的配置项
dataUrl : null, // 获取树所有节点的url
// 通过id获取某个节点的id全路径的url,返回值的格式应该是:parentId1/parentId2/parentId3/../节点id
// 如果不设置这个值,下拉树不会自动定位节点并在初始化时显示文本
nodePathUrl : null,
loader : null,
root : {},
rootVisible : false,
// 树的选择模式
rootSelectable : false, // 根节点是否可选,默认为false
folderSelectable : true, // 目录是否可选,默认为true
leafSelectable : true, // 叶子是否可选,默认为true
showFullPath : false, // 是否显示全路径
rootValue : undefined, // 根节点的值(通常根节点的取值与普通节点的取值不一样,如果一样则不需要设置此值)
// 原combo类的配置项
store : new Ext.data.SimpleStore({
fields : [],
data : [[]]
}),
mode : 'local',
triggerAction : 'all',
editable : false,
forceSelection : true,
tree : null, // 树控件,在expand方法中初始化
// private: 用于防止combo收缩,在树的事件中控制此属性值
preventCollapse : false,
initComponent : function() {
this.treeId = Ext.id();
this.height = this.height || 200;
this.tpl = String.format(
'<tpl for="."><div id="{0}" style="height:{1}px"></div></tpl>',
this.treeId, this.height);
Ext.ux.ComboBoxTree.superclass.initComponent.call(this);
},
setValue : function(value) {
if (Ext.isObject(value)) { // 点击树节点时的选择
this.doSetValue(value);
} else { // 只是设置一个值,从后台获取这个值的路径,并在树中选中这个节点
if (!this.tree)
this.initTree();
if (value === this.tree.root.id
|| (Ext.isDefined(this.rootValue) && value === this.rootValue)) { // 根节点
this.tree.root.select();
this.doSetValue(this.root);
return;
}
var url = this.nodePathUrl;
if (!url) {
this.doSetValue({
id : value
});
return;
}
Ext.Ajax.request({
url : url,
async : false,
scope : this,
success : function(resp, opts) {
var comboTree = this;
path = resp.responseText;
path = (path.indexOf('/') == 0 ? '' : '/')
+comboTree.tree.root.id+'/'+ path;
this.tree.selectPath(path, 'id', function(success,
node) {
comboTree.doSetValue(success
? node
: null);
});
},
faliure : function() {
alert(3)
}
});
/*
* cu.get(url, {id: value}).done(function(path){//从后台发起请求获取id路径 path =
* '/' + this.root.id + (path.indexOf('/') == 0 ? '' : '/') + path;
* var comboTree = this; this.tree.selectPath(path, 'id',
* function(success, node){ comboTree.doSetValue(success ? node :
* null); }); }, this);
*/
}
},
// private:设置值,参数value应该是一个对象
doSetValue : function(value) {
var id = value ? value.id : '';
var text = value ? value.text : '';
if (value && (value.loader || value.attributes)) { // 是树节点
var isRootNode = (value.id == this.tree.root.id);
if (isRootNode && Ext.isDefined(this.rootValue)) {
id = this.rootValue;
}
if (this.showFullPath) {
text = isRootNode ? '/' : value.getPath('text').replace(
'/' + this.tree.root.text, '');
}
}
this.value = id;
if (this.hiddenField) {
this.hiddenField.value = id; // 设置表单域
}
this.lastSelectionText = text;
this.el.dom.value = text; // 显示的值
this.fireEvent('select', this, value);
},
getValue : function() {
return Ext.isDefined(this.value) ? this.value : '';
},
// 取得选中的树节点
getValueNode : function() {
return this.tree
? this.tree.getSelectionModel().getSelectedNode()
: null;
},
getText : function() {
return this.lastSelectionText || '';
},
reload : function() {
if (!this.tree)
return;
var node = this.tree.getSelectionModel().getSelectedNode();
var path = node ? node.getPath() : null;
this.tree.getLoader().load(this.tree.root, function() {
if (path) {
this.tree.selectPath(path);
}
}, this);
this.preventCollapse = true;
},
// private: 根据preventCollapse属性判断是否要收缩
collapse : function() {
if (this.preventCollapse) {
this.preventCollapse = false;
return;
}
Ext.ux.ComboBoxTree.superclass.collapse.call(this);
},
// private:
expand : function() {
Ext.ux.ComboBoxTree.superclass.expand.call(this);
if (!this.tree) {
this.initTree();
}
},
// private:
destroy : function() {
if (this.tree && this.tree.rendered)
this.tree.destroy();
Ext.form.ComboBox.superclass.destroy.call(this);
},
// private
initTree : function() {
if (!this.list) { // 必须先初始化列表,在一开始就设置了combotree的值时尤其重要,发现这个问题花了半天时间
this.initList();
}
// 设置this.preventCollapse=true,防止combo收缩
var enableCollapse = function() {
this.preventCollapse = false;
};
// 设置this.preventCollapse=false,允许combo收缩
var disableCollapse = function() {
this.preventCollapse = true;
};
this.tree = new Ext.tree.TreePanel({
renderTo : this.treeId,
useArrows : false,
autoScroll : true,
height : this.height, // 修复IE的bug
animate : true,
enableDD : false,
containerScroll : true,
border : false,
dataUrl : this.dataUrl,
loader : this.loader,
root : this.root,
rootVisible : this.rootVisible,
// bbar:[
// '->', {text: '刷新', handler: this.reload, iconCls:
// 'icon-refresh', scope: this} //由于宽度问题取消此功能
// ],
listeners : {
click : function(node) {
disableCollapse();
if (node == this.tree.root) { // 选中根节点
if (!this.rootSelectable)
return;
} else if (!node.isLeaf()) { // 选中目录节点
if (!this.folderSelectable)
return;
} else { // 选中叶子节点
if (!this.leafSelectable)
return;
}
// 先选择节点,再设置value,让getNodeValue方法在select事件中取到正确的值
node.select();
this.setValue(node);
enableCollapse();
},
// 展开和收缩节点时防止combo收缩
beforeexpandnode : disableCollapse,
beforecollapsenode : disableCollapse,
beforeload : disableCollapse,
// 节点加载和展开后允许combo收缩
load : enableCollapse,
expandnode : enableCollapse,
scope : this
}
});
}
});
Ext.reg('combotree', Ext.ux.ComboBoxTree);