extjs4下拉列树如何实现？急急急。。。求能用的实例

[zhenchuang99]

extjs4下拉列树如何实现？

[MiceRice]

同学啊，善待Google啊，这种问题完全浪费分数啊：
http://blog.csdn.net/jelly_bitores/article/details/7623135

[这个用户很懒]

请看官方文档
http://dev.sencha.com/deploy/ext-4.0.7-gpl/docs/index.html#!/example/tree/two-trees.html

[zhenchuang99]

[Quote=引用 1 楼 的回复:]

同学啊，善待Google啊，这种问题完全浪费分数啊：
http://blog.csdn.net/jelly_bitores/article/details/7623135
[/Quote]
百度出来的，倒腾了一天，ie9，firefox不兼容。崩溃啊。

[zhenchuang99]

[Quote=引用 2 楼 的回复:]

请看官方文档
http://dev.sencha.com/deploy/ext-4.0.7-gpl/docs/index.html#!/example/tree/two-trees.html
[/Quote]

树我是没有问题了，就是下拉树不行了。

[zhenchuang99]

/**comboboxtree.js*/

Ext.define("Ext.ux.comboboxtree", {
extend : "Ext.form.field.Picker",
requires : ["Ext.tree.Panel"],
initComponent : function() {
var self = this;
Ext.apply(self, {
fieldLabel : self.fieldLabel,
labelWidth : self.labelWidth
});
self.callParent();
},
createPicker : function() {
var self = this;
var store = Ext.create('Ext.data.TreeStore', {
proxy : {
type : 'ajax',
url : self.storeUrl
},
sorters : [{
property : 'leaf',
direction : 'ASC'
}, {
property : 'text',
direction : 'ASC'
}],
root : {
id : self.rootId,
text : self.rootText
},
nodeParameter : self.treeNodeParameter
});
self.picker = new Ext.tree.Panel({
height : 300,
autoScroll : true,
floating : true,
focusOnToFront : false,
shadow : true,
ownerCt : this.ownerCt,
useArrows : true,
store : store,
animate:true,
rootVisible : false
});
self.picker.on({
checkchange : function(node, checked,obj) {
var records = self.picker.getView().getChecked(), names = [], values = [];


/**此注释部分为多选
Ext.Array.each(records, function(rec) {
names.push(rec.get('text'));
values.push(rec.get('id'));
});

self.setRawValue(values.join(';'));// 隐藏值
self.setValue(names.join(';'));// 显示值


*/

/**此处为单选*/
var checkedNodes =self.picker.getView().getChecked();
//alert(node.get("id"));
if(node.get("checked")){
self.setRawValue(node.get("id"));// 隐藏值
self.setValue(node.get("text"));// 显示值
}
for(var i=0;i<checkedNodes.length;i++){
var n = checkedNodes[i];
if(node.get("id") != n.get("id")){
n.set("checked" , false);
}
}

/**此处为单选*/

}
});
return self.picker;
},
alignPicker : function() {
var me = this, picker, isAbove, aboveSfx = '-above';
if (this.isExpanded) {
picker = me.getPicker();
if (me.matchFieldWidth) {
picker.setWidth(me.bodyEl.getWidth());
}
if (picker.isFloating()) {
picker.alignTo(me.inputEl, "", me.pickerOffset);
isAbove = picker.el.getY() < me.inputEl.getY();
me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls
+ aboveSfx);
picker.el[isAbove ? 'addCls' : 'removeCls'](picker.baseCls
+ aboveSfx);
}
}
}
});
···································
今天捣鼓了一个，有两个问题存在，1是不能自动加载，需要刷新下才能render到界面，2是明明设置了 self.setRawValue(node.get("id"));// 隐藏值
self.setValue(node.get("text"));// 显示值
，在界面上使用取值时，getValue()和getRawValue()却都只拿到‘text’，而拿不到‘id’的值

[brightyq]

下拉树？还是下拉列表？
这里也有例子哦。
http://dev.sencha.com/deploy/ext-4.0.7-gpl/docs/index.html#!/example/form/combos.html

一点点弄。这东西是体力活。

[wms821]

下拉树功能实现的代码比较多,
包括前台JS展现和后台树数据组装成json等;
参见开源项目jbob,该项目前台也用extjs:
http://code.google.com/p/jbob/downloads/detail?name=jbob-build-v1.1.rar
该项目里的\webapps\jbob\views\auth\resource\edit.js里的
parentResourceTree就是一个下拉树实现;

[zhenchuang99]

谢谢大家了，我的那两个问题搞定了，第一个问题解决方法：Ext.onReady(function() {
Ext.Loader.setConfig({enabled:true}); });第二个问题解决方法，我把self.picker.on({
checkchange : function(node, checked,obj) {}});这个方法摘带界面上去，参加了两个参数，方便取得id值。总算是解决了。

[java0706]

[Quote=引用 9 楼 的回复:]
谢谢大家了，我的那两个问题搞定了，第一个问题解决方法：Ext.onReady(function() {
Ext.Loader.setConfig({enabled:true}); });第二个问题解决方法，我把self.picker.on({
checkchange : function(node, checked,obj) {}});这个方法摘带界面上去，参加了两个参数，方便取得id值。总算……
[/Quote]
能否说的清楚点，不是很明白您的意思，如果方便的话贴一点成功实现的代码look look

[java0706]

楼上的能否说的清楚点，怎样取得id隐藏值，方便的话贴下成功实现的代码，谢谢！

[zhenchuang99]

[Quote=引用 11 楼 的回复:]
楼上的能否说的清楚点，怎样取得id隐藏值，方便的话贴下成功实现的代码，谢谢！
[/Quote]
comboboxtree.js
Ext.define("Ext.ux.comboboxtree", {
extend : "Ext.form.field.Picker",
requires : ["Ext.tree.Panel"],
initComponent : function() {
var self = this;
Ext.apply(self, {
fieldLabel : self.fieldLabel,
labelWidth : self.labelWidth
});
self.callParent();
},
createPicker : function() {
var self = this;
var store = self.store;
self.picker = new Ext.tree.Panel({
height : 220,
autoScroll : true,
floating : true,
focusOnToFront : false,
shadow : true,
ownerCt : this.ownerCt,
useArrows : true,
store : store,
rootVisible : false
});
return self.picker;
},
alignPicker : function() {
var me = this, picker, isAbove, aboveSfx = '-above';
if (this.isExpanded) {
picker = me.getPicker();
if (me.matchFieldWidth) {
picker.setWidth(me.bodyEl.getWidth());
}
if (picker.isFloating()) {
picker.alignTo(me.inputEl, "", me.pickerOffset);// ""->tl
isAbove = picker.el.getY() < me.inputEl.getY();
me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls
+ aboveSfx);
picker.el[isAbove ? 'addCls' : 'removeCls'](picker.baseCls
+ aboveSfx);
}
}
}
});

jsp页面代码：
var comboIds='<s:property value="trainTypeId"/>';;
var comboValues='<s:property value="trainTypeName"/>';
Ext.onReady(function() {
Ext.Loader.setConfig({enabled:true});
Ext.Loader.setPath('Ext.ux', './js');
var trainTypeTree =Ext.create("Ext.ux.comboboxtree", {
id:'trainTypeTree',
name:'name',
store:Ext.create('Ext.data.TreeStore', {
fields: ['id','text','checked',"keyword","leaf"],
proxy : {
type : 'ajax',
url : "getTrainTypeTree.action",
extraParams:{
//name:"check",
//keyword:"tips",
//id:'<s:property value="id"/>'
}
},
root : {
id : '0',
text : '根'
},
nodeParam : 'node'
}),
hiddenName:'hiddenName',
hiddenField:'hidden_ids',
width : 155,
allowBlank:false,
editable:false,
renderTo : 'gwypx_addpx_pxlx'
});
trainTypeTree.getPicker().on("checkchange",function(theNode,checked,options){
if (checked) {
comboIds = comboIds + "," + theNode.get("id");
comboValues = comboValues + "," + theNode.get("text");
} else {
var idArray = new Array();
var idstmp = ""
if (comboIds.length > 0) {
idstmp = comboIds.substring(1);
}
idArray = idstmp.split(',');
for(var j=0;j<idArray.length;j++){
if (theNode.get("id") == idArray[j]) {
idArray[j]="X";
break;
}
}
comboIds = "";
for(var k=0;k<idArray.length;k++){
if (idArray[k]!="X") {
comboIds = comboIds+","+idArray[k];
}
}
var valueArray = new Array();
var valuetmp = ""
if (comboValues.length > 0) {
valuetmp = comboValues.substring(1);
}
valueArray = valuetmp.split(',');
for(var j=0;j<valueArray.length;j++){
if (theNode.get("text") == valueArray[j]) {
valueArray[j]="";
break;
}
}
comboValues = "";
for(var k=0;k<valueArray.length;k++){
if (valueArray[k]!="") {
comboValues = comboValues+","+valueArray[k];
}
}
}
var checkedNodes =trainTypeTree.picker.getView().getChecked();
for(var i=0;i<checkedNodes.length;i++){
var n = checkedNodes[i];
if(theNode.get("id") != n.get("id")){
n.set("checked" , false);
}
}

trainTypeTree.collapse();
//alert(com.getValue());
//alert(comboValues.substring(1));
//com.setValue(comboValues.substring(1));
//单选部分
comboIds="";
comboValues="";
//if(theNode.get("checked")&&theNode.get("parentId")!=0){
if(theNode.get("checked")){
//alert(theNode.get("parentId"));
comboIds=theNode.get("id");
comboValues=theNode.get("text");
trainTypeTree.setValue(theNode.get("text"));
}else{
comboValues="";
}
trainTypeTree.setValue(comboValues);
});
trainTypeTree.setValue(comboValues);
});

代码有冗余部分，原来是多选，改成单选了，另外我这个是点击父节点才异步展开子节点的，使用的话，需要后台给相应的json数据。，比如：
[{"id":1,"parentId":0,"text":"人事系统培训","leaf":false,"checked":false},{"id":4,"parentId":0,"text":"rsxtpx","leaf":false,"checked":false}]
[{"id":2,"parentId":2,"text":"组织训调","leaf":true,"checked":false},{"id":3,"parentId":3,"text":"岗位培训","leaf":true,"checked":false}]
[{"id":5,"parentId":5,"text":"zzpx","leaf":true,"checked":false},{"id":6,"parentId":6,"text":"gwpx","leaf":true,"checked":false}]
其中父节点：人事系统培训；子节点：组织讯调，岗位培训
父节点：rsxtpx;子节点：zzpx，gwpx

[matengyu036912]

兄弟，我试了试，节点展开后再折叠就出毛病了！