我想用Ext4.0实现ComboBoxTree，但是只在界面上显示了ComBoBox，下拉框什么都没有，该问题已经纠结好多天了，求高手帮忙解救，万分感谢，代码如下：Ext.onReady(function() { var comboxWithPanel = new Ext.form.ComboBox({ store:new Ext.data.SimpleStore({fields:[],data:[[]]}), editable:false, mode: 'local', triggerAction:'all', maxHeight: 200, selectedClass:'', onSelect:Ext.emptyFn, tpl:'<tpl for="."><div id="treediv"></div></tpl>' });
comboxWithPanel.render('comboxWithPanel'); var store = Ext.create('Ext.data.TreeStore', { root: { expanded: true, children: [ { text: "detention", leaf: true }, { text: "homework", expanded: true, children: [ { text: "book report", leaf: true }, { text: "alegrbra", leaf: true} ] }, { text: "buy lottery tickets", leaf: true } ] } });
tree2=Ext.create('Ext.tree.Panel', { width: 200, height: 150, store: store, rootVisible: false });
var border = new Ext.Panel({ layout:'fit', border:false, height :200, items: tree2
});
comboxWithPanel.on('expand',function(){ //alert(document.getElementById('tree8').innerText ); //alert(document.getElementById('treediv').innerText ); border.render('treediv');
});});
comboxWithPanel.render('comboxWithPanel'); var store = Ext.create('Ext.data.TreeStore', { root: { expanded: true, children: [ { text: "detention", leaf: true }, { text: "homework", expanded: true, children: [ { text: "book report", leaf: true }, { text: "alegrbra", leaf: true} ] }, { text: "buy lottery tickets", leaf: true } ] } });
tree2=Ext.create('Ext.tree.Panel', { width: 200, height: 150, store: store, rootVisible: false });
var border = new Ext.Panel({ layout:'fit', border:false, height :200, items: tree2
});
comboxWithPanel.on('expand',function(){ //alert(document.getElementById('tree8').innerText ); //alert(document.getElementById('treediv').innerText ); border.render('treediv');
});});
root: {
expanded: true,
children: [
{ text: "detention", leaf: true ,checked:true},
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true ,checked:true},
{ text: "alegrbra", leaf: true,checked:true}
] },
{ text: "buy lottery tickets", leaf: true,checked:true }
]
}
});
我试了，不行，我觉得问题是alert(document.getElementById('treediv').innerText );，这句就有问题了，好像tpl中的没起作用！
listConfig:{getInnerTpl: function(displayField) {
return '<div id="treediv"></div>' ;
}},
tree2 : null,
onExpand:function(){
if (tree2==null)
{
tree2=Ext.create('Ext.tree.Panel', {
width: 200,
height: 150,
renderTo:'treediv',
store: store,
rootVisible: false,
visible:true
});
}
}
});
comboxWithPanel.render('comboxWithPanel'); var store = Ext.create('Ext.data.TreeStore', {
isLocalMode:true,
root: { expanded: true, children: [ { text: "detention", leaf: true }, { text: "homework", expanded: true, children: [ { text: "book report", leaf: true }, { text: "alegrbra", leaf: true} ] }, { text: "buy lottery tickets", leaf: true } ] } });
tree4=Ext.create('Ext.tree.Panel', {
width: 200,
height: 150,
//renderTo:'treediv',
store: store,
rootVisible: false,
visible:false
});
var tree2 =null;
comboxWithPanel.on('expand1',function(){
if(tree2==null)
{
tree2 = Ext.create('Ext.tree.Panel', {
width: 200,
height: 150,
renderTo:'treediv',
store: store,
rootVisible: false,
visible:false
});
}
//alert(document.getElementById('tree8').innerText ); //alert(document.getElementById('treediv').innerText ); //tree2.setVisible(true);
// border.render('treediv');
});});
http://dev.sencha.com/deploy/ext-4.0.1/examples/tree/check-tree.html[{
"text": "To Do",
"cls": "folder",
"expanded": true,
"children": [{
"text": "Go jogging",
"leaf": true,
"checked": true
},{
"text": "Take a nap",
"leaf": true,
"checked": false
},{
"text": "Climb Everest",
"leaf": true,
"checked": false
}]
},{
"text": "Grocery List",
"cls": "folder",
"children": [{
"text": "Bananas",
"leaf": true,
"checked": false
},{
"text": "Milk",
"leaf": true,
"checked": false
},{
"text": "Cereal",
"leaf": true,
"checked": false
},{
"text": "Energy foods",
"cls": "folder",
"children": [{
"text": "Coffee",
"leaf": true,
"checked": false
},{
"text": "Red Bull",
"leaf": true,
"checked": false
}]
}]
},{
"text": "Remodel Project",
"cls": "folder",
"children": [{
"text": "Finish the budget",
"leaf": true,
"checked": false
},{
"text": "Call contractors",
"leaf": true,
"checked": false
},{
"text": "Choose design",
"leaf": true,
"checked": false
}]
}]
Ext.onReady(function() { var comboWithTooltip = new Ext.form.ComboBox({
store : new Ext.data.SimpleStore({
fields : [],
data : [[]]
}),
editable : false, // 禁止手写及联想功能
mode : 'local',
triggerAction : 'all',
name : 'dep',
fieldLabel : '单位',
maxHeight : 200,
tpl : '<div id="tree" style="height:200px"></div>', // html代码
selectedClass : '',
onSelect : Ext.emptyFn,
emptyText : '请选择...'
// renderTo: 'comboxtree'
});
// 创建树形结构
var tree = new Ext.tree.TreePanel({
border : false,
autoScroll : true,
animate : true,
autoWidth : true,
autoHeight : true,
enableDD : true,
containerScroll : true,
loader : new Ext.tree.TreeLoader({
dataUrl : 'tree.do?action=getDepartmentTree'
// dataUrl:'data.jsp'
// //注意这个data.jsp,这是我在测试时使用的。下面我会列出data.jsp的格式
})
}); // 树的点击时间
tree.on("click", function(node, e) {
// if(!node.isLeaf()){
// e.stopEvent();//非叶子节点则不触发
// }
if (node.text == "单位") {
e.stopEvent();
} else {
comboWithTooltip.setRawValue(node.text)
// comboWithTooltip.setValue(node.id);//设置option值
comboWithTooltip.collapse();// 隐藏option列表
// alert(comboWithTooltip.getValue()+":");//打印option值
document.getElementById('depId').value = node.id;
// alert(document.getElementById('depId').value) }
});
var root = new Ext.tree.AsyncTreeNode({
text : '单位', // 节点名称
draggable : false, // 是否支持拖动
id : '0101103' // 节点id
}); tree.setRootNode(root);
// 展开option时生成树
comboWithTooltip.on('expand', function() {
tree.render('tree');
// tree.expandAll();//自动展开树
}); })
参考var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});
var comboxWithPanel = new Ext.form.ComboBox({ store:new Ext.data.SimpleStore({fields:[],data:[[]]}), editable:false, mode: 'local', triggerAction:'all', maxHeight: 200, selectedClass:'', onSelect:Ext.emptyFn, tpl:'<tpl for="."><div id="treediv"></div></tpl>' });跟你上边的这些代码有关吗？怎么看怎么就没关系呢
很乱
如果没关系我可以告诉你。我刚刚搞定 这颗儍树（“Ext.data.TreeStore”）
* Ext jsonp 回调方法
*
* @param json
*/
var someCallback;Ext.define("Ext.ux.UserTreePicker", {
extend: "Ext.form.field.Picker",
requires: ["Ext.tree.Panel"],
alias: ['widget.userTreePicker'],
singleSelect:true,
singleExpand:false,
rightsFilter:false,
editable:false,
pickerWidth:null,
id:null,
splitChar:";",
initComponent: function() {
var self = this;
Ext.apply(self, {
fieldLabel: self.fieldLabel,
labelWidth: self.labelWidth
});
self.callParent();
self.createPicker();
},
createPicker: function() {
var me = this; Ext.define('UserTree', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'string',convert:function initId(val, meta) {
return meta.data.code;
}},
{name: 'code', type: 'string'},
{name: 'name', type: 'string'},
{name: 'leader', type: 'string'},
{name: 'parentCode', type: 'string'},
{name: 'type', type: 'string'},
{name: 'leaf',convert:function initLeaf(val, meta) {
var leaf;
if (meta.data) {
leaf = meta.data.type == 1;
} if (meta.data.type == 1) {
meta.data.checked = false;
} return leaf;
}},
{name: 'qtip',convert:function initLeaf(val, meta) {
return meta.data.name;
}}
]
});// ,\"loginName\":\""+getUserInfo().pin+"\",\"jsonpId\":\""+me.id+"\"}} var url = urmDeptUser.urmDeptUserListUrl+'?p={"data":{"appCode":"'+urmDeptUser.urmAppCode+'","jsonp":"true","jsonpId":"'+me.id+'"}}';
if(me.rightsFilter){
url = urmDeptUser.urmDeptUserListUrl+'?p={"data":{"appCode":"'+urmDeptUser.urmAppCode+'","jsonp":"true","loginName":"'+getUserInfo().pin+'","jsonpId":"'+me.id+'"}}';
} var userTreeStore = Ext.create('Ext.data.TreeStore', {
model: 'UserTree',
storeId:me.id+"TreePickerStore",
proxy: {
type: 'jsonp',
url:url,
reader: {
type: 'json',
root:'list'
}
},
sorters: [
{
property: 'leaf',
direction: 'ASC'
}
],
root: {
name:"未选择",
code:'0',
expanded: true,
list: [ ]
},
listeners:{
load:function(){
}
}
});
someCallback = function (id,json) {
Ext.getStore(id+"TreePickerStore").getRootNode().appendChild(json.list);
};
userTreeStore.load();
me.userTreeStore = userTreeStore; var userTree = Ext.create('Ext.tree.Panel', {
height: 250,
width:400,
autoScroll: true,
floating: true,
// focusOnToFront: false,
shadow: true,
store: userTreeStore,
displayField:'name',
padding:0,
frame: true,
useArrows: true,
rootVisible: false,
listeners: {
itemclick: function(view, record) {
if (!record.isLeaf()) {
if (record.isExpanded()) {
record.collapse();
} else {
record.expand();
}
}else{
if(record.get('checked')){
record.set('checked', false);
}else{
if(me.singleSelect){
me.clearTreePickerValue();
me.collapse();
}
record.set('checked', true);
}
} me.setTreePickerValue();
}
}
});
me.picker = userTree; return me.picker;
},
alignPicker: function() {
var me = this,
picker, isAbove, aboveSfx = '-above';
if (this.isExpanded) {
picker = me.getPicker(); if(me.pickerWidth){
if(me.pickerWidth == "input"){
me.pickerWidth = me.bodyEl.getWidth();
}else if(me.pickerWidth == "default"){
me.pickerWidth = me.labelWidth + me.bodyEl.getWidth();
}
}else{
me.pickerWidth = me.labelWidth + me.bodyEl.getWidth();
}
picker.setWidth(me.pickerWidth); 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);
}
}
},
setTreePickerValue:function() {
var me = this;
var records = me.picker.getChecked(),names = [],values = [];
Ext.Array.each(records, function(rec) {
names.push(rec.get('name'));
values.push(rec.get('code'));
}); me.setRawValue(values.join(me.splitChar)); // 隐藏值
me.setValue(names.join(me.splitChar),true); // 显示值
},
/**
* 清楚之前选择的值
* @param collapseFlag 是否关闭节点
*/
clearTreePickerValue:function(collapseFlag){
var me = this;
var records = me.picker.getChecked(); Ext.Array.each(records, function(rec) {
rec.set('checked', false);
if(collapseFlag){
me.collapseParentNode(rec);
}
});
},
expandParentNode :function(node) {
var me = this;
var pNode = node.parentNode;
if (pNode && pNode.get('code') != '0') {
me.expandParentNode(pNode);
pNode.expand();
}
},
collapseParentNode :function(node) {
var me = this;
var pNode = node.parentNode;
if (pNode && pNode.get('code') != '0') {
me.collapseParentNode(pNode);
pNode.collapse();
}
},setValue: function(value,flag) {
var me = this,
inputEl = me.inputEl;
if (inputEl && me.emptyText && !Ext.isEmpty(value)) {
inputEl.removeCls(me.emptyCls);
} me.callParent(arguments); me.applyEmptyText();
if(!flag && value){
//去除选中节点
me.clearCheckAll();
value = value.toUpperCase();
if(me.singleSelect){
me.checkTreePickerById(value);
}else{
//选中节点
var values = value.split(me.splitChar);
Ext.each(values,function(val){
me.checkTreePickerById(val);
});
}
me.setTreePickerValue();
}
return me;
},getValue: function(){
var me = this;
var records = me.picker.getChecked();
var val;
if(me.singleSelect){
if(records && records[0]){
val = records[0].get('code');
}
}else{
val = [];
Ext.Array.each(records, function(rec) {
val.push(rec.get('code'));
});
}
return val;
},getRawValue: function(){ var me = this;
var records = me.picker.getChecked();
var val;
if(records){
if(me.singleSelect){
if(records && records[0]){
val = records[0].get('code');
}
}else{
val = [];
Ext.Array.each(records, function(rec) {
val.push(rec.get('code'));
});
}
}
return val;
},
clearCheckAll:function(){
var me = this;
var records = me.picker.getChecked();
Ext.Array.each(records, function(rec) {
rec.set('checked', false);
me.collapseParentNode(rec);
});
},
checkTreePickerById:function(id){
var me = this;
var node = me.userTreeStore.getNodeById(id);
if(node){
me.checkTreePicker(node);
}
},
checkTreePicker:function(node){
var me = this;
node.set("checked", true);
me.expandParentNode(node);
},isValid : function(){
var me = this;
if(me.getRawValue()){
return true;
}
return false;
}
});