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

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

百度出来的，倒腾了一天，ie9，firefox不兼容。崩溃啊。

/**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’的值

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

下拉树功能实现的代码比较多,
包括前台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就是一个下拉树实现;

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

能否说的清楚点，不是很明白您的意思，如果方便的话贴一点成功实现的代码look look

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

调试易

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

解决方案 »