Ext TreeCombo 树形 下拉框,树形下拉框,EXT树形
2013-06-03 13:11
337 查看
1.添加hiddenName，使传值时跟Ext.form.ComboBox类似;
2.设值时展开整棵树(在TreeCombo外实现)，使弹出下拉框时默认选中节点;
代码如下:
Js代码
/**
* @version Base on Ext3.0
* @class Ext.ux.TreeCombo
* @extends Ext.form.TriggerField
*/
Ext.ux.TreeCombo = Ext.extend(Ext.form.TriggerField, {
// triggerClass: 'x-form-tree-trigger',
initComponent : function() {
this.readOnly = true;
Ext.ux.TreeCombo.superclass.initComponent.call(this);
this.on('specialkey', function(f, e) {
if (e.getKey() == e.ENTER) {
this.onTriggerClick();
}
}, this);
this.getTree();
},
onTriggerClick : function() {
this.getTree().show();
this.getTree().getEl().alignTo(this.wrap, 'tl-bl?');
},
getTree : function() {
if (!this.treePanel) {
if (!this.treeWidth) {
this.treeWidth = Math.max(150, this.width || 200);
}
if (!this.treeHeight) {
this.treeHeight = 200;
}
this.treePanel = new Ext.tree.TreePanel({
renderTo : Ext.getBody(),
loader : this.loader || new Ext.tree.TreeLoader({
preloadChildren : (typeof this.root == 'undefined'),
url : this.dataUrl || this.url
}),
root : this.root || new Ext.tree.AsyncTreeNode({
children : this.children
}),
rootVisible : (typeof this.rootVisible != 'undefined')
? this.rootVisible
: (this.root ? true : false),
floating : true,
autoScroll : true,
minWidth : 200,
minHeight : 200,
width : this.treeWidth,
height : this.treeHeight,
listeners : {
hide : this.onTreeHide,
show : this.onTreeShow,
click : this.onTreeNodeClick,
expandnode : this.onExpandOrCollapseNode,
collapsenode : this.onExpandOrCollapseNode,
resize : this.onTreeResize,
scope : this
}
});
this.treePanel.show();
this.treePanel.hide();
this.relayEvents(this.treePanel.loader, ['beforeload', 'load',
'loadexception']);
if (this.resizable) {
this.resizer = new Ext.Resizable(this.treePanel.getEl(), {
pinned : true,
handles : 'se'
});
this.mon(this.resizer, 'resize', function(r, w, h) {
this.treePanel.setSize(w, h);
}, this);
}
}
return this.treePanel;
},
onExpandOrCollapseNode : function() {
if (!this.maxHeight || this.resizable)
return; // -----------------------------> RETURN
var treeEl = this.treePanel.getTreeEl();
var heightPadding = treeEl.getHeight() - treeEl.dom.clientHeight;
var ulEl = treeEl.child('ul'); // Get the underlying tree element
var heightRequired = ulEl.getHeight() + heightPadding;
if (heightRequired > this.maxHeight)
heightRequired = this.maxHeight;
this.treePanel.setHeight(heightRequired);
},
onTreeResize : function() {
if (this.treePanel)
this.treePanel.getEl().alignTo(this.wrap, 'tl-bl?');
},
onTreeShow : function() {
Ext.getDoc().on('mousewheel', this.collapseIf, this);
Ext.getDoc().on('mousedown', this.collapseIf, this);
},
onTreeHide : function() {
Ext.getDoc().un('mousewheel', this.collapseIf, this);
Ext.getDoc().un('mousedown', this.collapseIf, this);
},
collapseIf : function(e) {
if (!e.within(this.wrap) && !e.within(this.getTree().getEl())) {
this.collapse();
}
},
collapse : function() {
this.getTree().hide();
if (this.resizer)
this.resizer.resizeTo(this.treeWidth, this.treeHeight);
},
// private
validateBlur : function() {
return !this.treePanel || !this.treePanel.isVisible();
},
setValue : function(v) {
this.startValue = this.value = v;
if (this.treePanel) {
var n = this.treePanel.getNodeById(v);//位于一级以下节点要树全部展开时才可用
if (n) {
n.select();//默认选中节点
this.setRawValue(n.text);
if (this.hiddenField)
this.hiddenField.value = v;
}
}
},
getValue : function() {
return this.value;
},
onTreeNodeClick : function(node, e) {
this.setRawValue(node.text);
this.value = node.id;
if (this.hiddenField)
this.hiddenField.value = node.id;
this.fireEvent('select', this, node);
this.collapse();
},
onRender : function(ct, position) {
Ext.ux.TreeCombo.superclass.onRender.call(this, ct, position);
if (this.hiddenName) {
this.hiddenField = this.el.insertSibling({
tag : 'input',
type : 'hidden',
name : this.hiddenName,
id : (this.hiddenId || this.hiddenName)
}, 'before', true);
// prevent input submission
this.el.dom.removeAttribute('name');
}
}
});
示例:
1:选择页面，在定义了根节点的情况下逐级加载
Js代码
var businessId = new Ext.ux.TreeCombo({
fieldLabel : '业务名称',
width : 120,
allowBlank : false,
//name : 'param.businessId',
hiddenName : 'param.businessId',
rootVisible : true,
root : new Ext.tree.AsyncTreeNode({
text : '业务列表',
expanded : true,
levelNum : 0,
id : '100000'
}),
dataUrl : 'getChild_business.do?param.superId=100000'
});
businessId.treePanel.on('beforeload', function(node) {
businessId.treePanel.loader.dataUrl = 'getChild_business.do?param.superId='
+ node.id;});
Js代码
后台请求回来的数据如: [{text:'业务23',id:'200024'},{text:'业务2',id:'200043'}]
2.显示并修改(expandAll后再setValue)
Js代码
var businessId = new Ext.ux.TreeCombo({
fieldLabel : '业务名称',
width : 120,
allowBlank : false,
hiddenName : 'param.businessId',
rootVisible : false,
dataUrl : 'getAllJson_business.do'
});
businessId.treePanel.on('load', function() {
businessId.setValue('<s:property value="#param.businessId" />');
});
businessId.treePanel.expandAll();
Js代码
后台请求返回的json如:
[{
"id" : 100000,
"text" : "业务列表",
"leaf" : false,
"superId" : 0,
"children" : [{
"id" : 200024,
"text" : "业务23",
"leaf" : false,
"superId" : 100000,
"children" : [...略]
}, {
"id" : 200043,
"text" : "业务2",
"leaf" : false,
"superId" : 100000,
"children" : [...略]
}]
}]
3.只读(直接用Ext.form.ComboBox)
Js代码
后台数据返回对应项即可
[{"value":"200043","display":"业务2"}]
----------------------2012-12-04-------补充个用静态树的例子---------备忘---------------------------
Java代码
var childrenArrData =
[{ id:'-1',
text:'根节点',
value:'-1',
leaf:false,
children:[{id:'100',text:'测试',serialStart:'-1',leaf:false,children:[]}]
}];
var treeCombo = new Ext.ux.TreeCombo({
fieldLabel : 'xx',
width : 300,
name : 'treeCombo',
hiddenName : 'treeCombo',
rootVisible : false,
root:new Ext.tree.AsyncTreeNode({
id:"-1",
text:"根节点",
expanded:true,
leaf:false,
children: childrenArrData
})
});
treeCombo.treePanel.on('click',function(node){
alert(node.attributes.value);//取节点属性
});
//先展开，再设值。这样才会显示text值，不然会显示value去
function setTaskSerial(val){
treeCombo.treePanel.expandAll();
treeCombo.setValue(val);
}
function gettreeCombo(){
return treeCombo.getValue();
}
----------------------2012-12-04-------补充只读不可编辑---------备忘---------------------------
Java代码
onTriggerClick : function() {
if(!this.disabled){//modify 20121204
this.getTree().show();
this.getTree().getEl().alignTo(this.wrap, 'tl-bl?');
}
},
在原来的基础上加个判断，这样treeCombo.disable();后点击下拉箭头就能不让下拉了。
此文章为转载,仅供技术参考
下面是源码下载(完整项目+代码):
TreeCombo 点击下载即可运行..
2.设值时展开整棵树(在TreeCombo外实现)，使弹出下拉框时默认选中节点;
代码如下:
Js代码
/**
* @version Base on Ext3.0
* @class Ext.ux.TreeCombo
* @extends Ext.form.TriggerField
*/
Ext.ux.TreeCombo = Ext.extend(Ext.form.TriggerField, {
// triggerClass: 'x-form-tree-trigger',
initComponent : function() {
this.readOnly = true;
Ext.ux.TreeCombo.superclass.initComponent.call(this);
this.on('specialkey', function(f, e) {
if (e.getKey() == e.ENTER) {
this.onTriggerClick();
}
}, this);
this.getTree();
},
onTriggerClick : function() {
this.getTree().show();
this.getTree().getEl().alignTo(this.wrap, 'tl-bl?');
},
getTree : function() {
if (!this.treePanel) {
if (!this.treeWidth) {
this.treeWidth = Math.max(150, this.width || 200);
}
if (!this.treeHeight) {
this.treeHeight = 200;
}
this.treePanel = new Ext.tree.TreePanel({
renderTo : Ext.getBody(),
loader : this.loader || new Ext.tree.TreeLoader({
preloadChildren : (typeof this.root == 'undefined'),
url : this.dataUrl || this.url
}),
root : this.root || new Ext.tree.AsyncTreeNode({
children : this.children
}),
rootVisible : (typeof this.rootVisible != 'undefined')
? this.rootVisible
: (this.root ? true : false),
floating : true,
autoScroll : true,
minWidth : 200,
minHeight : 200,
width : this.treeWidth,
height : this.treeHeight,
listeners : {
hide : this.onTreeHide,
show : this.onTreeShow,
click : this.onTreeNodeClick,
expandnode : this.onExpandOrCollapseNode,
collapsenode : this.onExpandOrCollapseNode,
resize : this.onTreeResize,
scope : this
}
});
this.treePanel.show();
this.treePanel.hide();
this.relayEvents(this.treePanel.loader, ['beforeload', 'load',
'loadexception']);
if (this.resizable) {
this.resizer = new Ext.Resizable(this.treePanel.getEl(), {
pinned : true,
handles : 'se'
});
this.mon(this.resizer, 'resize', function(r, w, h) {
this.treePanel.setSize(w, h);
}, this);
}
}
return this.treePanel;
},
onExpandOrCollapseNode : function() {
if (!this.maxHeight || this.resizable)
return; // -----------------------------> RETURN
var treeEl = this.treePanel.getTreeEl();
var heightPadding = treeEl.getHeight() - treeEl.dom.clientHeight;
var ulEl = treeEl.child('ul'); // Get the underlying tree element
var heightRequired = ulEl.getHeight() + heightPadding;
if (heightRequired > this.maxHeight)
heightRequired = this.maxHeight;
this.treePanel.setHeight(heightRequired);
},
onTreeResize : function() {
if (this.treePanel)
this.treePanel.getEl().alignTo(this.wrap, 'tl-bl?');
},
onTreeShow : function() {
Ext.getDoc().on('mousewheel', this.collapseIf, this);
Ext.getDoc().on('mousedown', this.collapseIf, this);
},
onTreeHide : function() {
Ext.getDoc().un('mousewheel', this.collapseIf, this);
Ext.getDoc().un('mousedown', this.collapseIf, this);
},
collapseIf : function(e) {
if (!e.within(this.wrap) && !e.within(this.getTree().getEl())) {
this.collapse();
}
},
collapse : function() {
this.getTree().hide();
if (this.resizer)
this.resizer.resizeTo(this.treeWidth, this.treeHeight);
},
// private
validateBlur : function() {
return !this.treePanel || !this.treePanel.isVisible();
},
setValue : function(v) {
this.startValue = this.value = v;
if (this.treePanel) {
var n = this.treePanel.getNodeById(v);//位于一级以下节点要树全部展开时才可用
if (n) {
n.select();//默认选中节点
this.setRawValue(n.text);
if (this.hiddenField)
this.hiddenField.value = v;
}
}
},
getValue : function() {
return this.value;
},
onTreeNodeClick : function(node, e) {
this.setRawValue(node.text);
this.value = node.id;
if (this.hiddenField)
this.hiddenField.value = node.id;
this.fireEvent('select', this, node);
this.collapse();
},
onRender : function(ct, position) {
Ext.ux.TreeCombo.superclass.onRender.call(this, ct, position);
if (this.hiddenName) {
this.hiddenField = this.el.insertSibling({
tag : 'input',
type : 'hidden',
name : this.hiddenName,
id : (this.hiddenId || this.hiddenName)
}, 'before', true);
// prevent input submission
this.el.dom.removeAttribute('name');
}
}
});
示例:
1:选择页面，在定义了根节点的情况下逐级加载
Js代码
var businessId = new Ext.ux.TreeCombo({
fieldLabel : '业务名称',
width : 120,
allowBlank : false,
//name : 'param.businessId',
hiddenName : 'param.businessId',
rootVisible : true,
root : new Ext.tree.AsyncTreeNode({
text : '业务列表',
expanded : true,
levelNum : 0,
id : '100000'
}),
dataUrl : 'getChild_business.do?param.superId=100000'
});
businessId.treePanel.on('beforeload', function(node) {
businessId.treePanel.loader.dataUrl = 'getChild_business.do?param.superId='
+ node.id;});
Js代码
后台请求回来的数据如: [{text:'业务23',id:'200024'},{text:'业务2',id:'200043'}]
2.显示并修改(expandAll后再setValue)
Js代码
var businessId = new Ext.ux.TreeCombo({
fieldLabel : '业务名称',
width : 120,
allowBlank : false,
hiddenName : 'param.businessId',
rootVisible : false,
dataUrl : 'getAllJson_business.do'
});
businessId.treePanel.on('load', function() {
businessId.setValue('<s:property value="#param.businessId" />');
});
businessId.treePanel.expandAll();
Js代码
后台请求返回的json如:
[{
"id" : 100000,
"text" : "业务列表",
"leaf" : false,
"superId" : 0,
"children" : [{
"id" : 200024,
"text" : "业务23",
"leaf" : false,
"superId" : 100000,
"children" : [...略]
}, {
"id" : 200043,
"text" : "业务2",
"leaf" : false,
"superId" : 100000,
"children" : [...略]
}]
}]
3.只读(直接用Ext.form.ComboBox)
Js代码
后台数据返回对应项即可
[{"value":"200043","display":"业务2"}]
----------------------2012-12-04-------补充个用静态树的例子---------备忘---------------------------
Java代码
var childrenArrData =
[{ id:'-1',
text:'根节点',
value:'-1',
leaf:false,
children:[{id:'100',text:'测试',serialStart:'-1',leaf:false,children:[]}]
}];
var treeCombo = new Ext.ux.TreeCombo({
fieldLabel : 'xx',
width : 300,
name : 'treeCombo',
hiddenName : 'treeCombo',
rootVisible : false,
root:new Ext.tree.AsyncTreeNode({
id:"-1",
text:"根节点",
expanded:true,
leaf:false,
children: childrenArrData
})
});
treeCombo.treePanel.on('click',function(node){
alert(node.attributes.value);//取节点属性
});
//先展开，再设值。这样才会显示text值，不然会显示value去
function setTaskSerial(val){
treeCombo.treePanel.expandAll();
treeCombo.setValue(val);
}
function gettreeCombo(){
return treeCombo.getValue();
}
----------------------2012-12-04-------补充只读不可编辑---------备忘---------------------------
Java代码
onTriggerClick : function() {
if(!this.disabled){//modify 20121204
this.getTree().show();
this.getTree().getEl().alignTo(this.wrap, 'tl-bl?');
}
},
在原来的基础上加个判断，这样treeCombo.disable();后点击下拉箭头就能不让下拉了。
此文章为转载,仅供技术参考
下面是源码下载(完整项目+代码):
TreeCombo 点击下载即可运行..
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- EXT 根据下拉框动态设置值到其他下拉框或者textfield中
- 项目中常用的树形结构(struts-menu/DTree/Ext Tree/YUI Tree)
- Ext.TreePanel 树形目录显示复选框
- [导入]项目中常用的树形结构(struts-menu/DTree/Ext Tree/YUI Tree)
- Ext5实现树形下拉框ComboBoxTree
- Ext comboBoxTree (完整的数据加载)--下拉列表里边是树结构
- Extjs 多选下拉框 Ext.ux.form.LovCombo默认选择及其它BUG修复版支持多选/全选/全不选ext3.x
- EXT 4.2 combo运用TPL 下拉表格
- [JAVASCRIPT][EXTJS]直接用JSON创建树形控件（Ext.tree.TreePanel ）(转)
- Extjs 多选下拉框 Ext.ux.form.LovCombo默认选择及其它BUG修复版支持多选/全选/全不选ext3.x
- Easyui - combo[tree,box]下拉图标有间隙bug解决方法
- Ext.Net 1.x_Ext.Net.TreeGrid-无限制树形GUCD
- Ext.tree树形控件设置
- Ext.tree.TreePanel树形复选框
- Ext.Net 1.x_Ext.Net.TreeGrid-无限制树形GUCD
- Ext中的下拉框（combo）取值
- EXT的formfield中combo下拉框为textfield赋值
- flex下的树形下拉框treecombobox
- [JAVASCRIPT][EXTJS]直接用JSON创建树形控件（Ext.tree.TreePanel ）
- Ext 树形的下拉框