87,990
社区成员
发帖
与我相关
我的任务
分享求助：Ext4.0版本如何实现ComboBoxTree，愁死了！！！
我想用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');
});
});
...全文
请发表友善的回复…
发表回复
葫芦八娃 2013-05-17
- 打赏
- 举报
这QQ有神马问题？
fixed 2013-05-17
- 打赏
- 举报
QQ 甚加 呵呵
fixed 2013-05-17
- 打赏
- 举报
我已经实现 楼上是我的代码。也许部分代码跟业务相关。但是应该不影响你看懂。只要你真的需要相信你能看懂。实在不行QQ： 184762725
fixed 2013-05-17
- 打赏
- 举报
/**
* 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;
}
});
moment52 2012-08-09
- 打赏
- 举报
LZ你这代码也不是4的是3的啊
fixed 2011-07-25
- 打赏
- 举报
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”）
fixed 2011-07-25
- 打赏
- 举报
哥们我无语了 我怎么看怎么就是 Ext3.0 + Ext4.0 呢 好好检查代码
参考
参考
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()
});
豆虫 2011-07-18
- 打赏
- 举报
参考：
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();//自动展开树
});
})hexawing 2011-07-18
- 打赏
- 举报
url : self.storeUrl
这个换成你自己的后台数据。
出来的JSON数据官方有个例子，照着来：
http://dev.sencha.com/deploy/ext-4.0.1/examples/tree/check-tree.html
这个换成你自己的后台数据。
出来的JSON数据官方有个例子，照着来：
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
}]
}]hexawing 2011-07-18
- 打赏
- 举报
http://chenjinglys.blog.163.com/blog/static/16657571620115833054920/
我在这位大侠这里弄了下，成功了，不过是在FF里，IE6下不行。供参考……
我在这位大侠这里弄了下，成功了，不过是在FF里，IE6下不行。供参考……
不訴離傷 2011-07-07
- 打赏
- 举报
extjs4 好像改動還是蠻大的，很多舊的API有問題吧。
不訴離傷 2011-07-07
- 打赏
- 举报
好像看過文章，store就可以通用，不用建TreeStore，我也不太懂，刚要学而已，看下EXTJS 4新特性还是什么的一篇文章。
李峥 2011-07-07
- 打赏
- 举报
多谢高手帮忙解决该问题，代码如下：
Ext.onReady(function() {
var comboxWithPanel = new Ext.form.ComboBox({
store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
editable:false,
queryMode : 'local',
triggerAction:'all',
maxHeight: 200,
selectedClass:'',
onSelect:Ext.emptyFn,
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');
});
});
lsw645645645 2011-07-07
- 打赏
- 举报
看看官方文档嘛
JParser 2011-07-05
- 打赏
- 举报
{ text: "detention", leaf: true,checked:true}
flyerwing 2011-07-05
- 打赏
- 举报
[Quote=引用 1 楼 jsperl 的回复:]
这个东西是自己扩展出来的，4.0没用过，3.0从网上能找到不少下载
[/Quote]
是地.
这个东西是自己扩展出来的，4.0没用过，3.0从网上能找到不少下载
[/Quote]
是地.
李峥 2011-07-05
- 打赏
- 举报
已经用4.0版本了，没找到ComboTree的例子，3.0的好像不能用，太郁闷了！
JSPerl 2011-07-05
- 打赏
- 举报
这个东西是自己扩展出来的，4.0没用过，3.0从网上能找到不少下载
李峥 2011-07-05
- 打赏
- 举报
是这个么：
我试了，不行，我觉得问题是alert(document.getElementById('treediv').innerText );，这句就有问题了，好像tpl中的没起作用！
var store = Ext.create('Ext.data.TreeStore', {
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中的没起作用！
