直接上代码:
Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, {
constructor : function(cfg) {
cfg = cfg || {};
Ext.ux.TreeCombo.superclass.constructor.call(this, Ext.apply({
maxHeight : 300,
editable : false,
mode : 'local',
triggerAction : 'all',
rootVisible : false,
selectMode : 'all'
}, cfg));
},
store : new Ext.data.SimpleStore({
fields : [],
data : [[]]
}),
// 重写onViewClick,使展开树结点是不关闭下拉框
onViewClick : function(doFocus) {
var index = this.view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index);
if (r) {
this.onSelect(r, index);
}
if (doFocus !== false) {
this.el.focus();
}
},
tree : null,
// 隐藏值
hiddenValue : null,
getHiddenValue : function() {
return this.hiddenValue;
},
setHiddenValue : function(code, dispText) {
this.setValue(code);
Ext.form.ComboBox.superclass.setValue.call(this, dispText);
this.hiddenValue = code;
},
initComponent : function() {
var _this = this;
var tplRandomId = 'deptcombo_' + Math.floor(Math.random() * 1000) + this.tplId
this.tpl = "<div style='height:" + _this.maxHeight + "px' id='" + tplRandomId + "'></div>"
this.tree = new Ext.tree.TreePanel({
border : false,
enableDD : false,
enableDrag : false,
rootVisible : _this.rootVisible || false,
autoScroll : true,
trackMouseOver : true,
height : _this.maxHeight,
lines : true,
singleExpand : true,
root : new Ext.tree.AsyncTreeNode({
id : _this.rootId,
text : _this.rootText,
leaf : false,
border : false,
draggable : false,
singleClickExpand : false,
hide : true
}),
loader : new Ext.tree.TreeLoader({
dataUrl : _this.url
})
});
this.tree.on('click', function(node) {
if ((_this.selectMode == 'leaf' && node.leaf == true) || _this.selectMode == 'all') {
// if (node.parentNode && node.parentNode.attributes.id != '000000') {
var dispText = node.text;
var code = node.id;
while (node.parentNode && node.parentNode.attributes.id != '000000') {
if (node.parentNode.text != dispText) {
dispText = node.parentNode.text + dispText;
}
node = node.parentNode;
}
_this.setHiddenValue(code, dispText);
_this.collapse();
}
});
this.on('expand', function() {
this.tree.render(tplRandomId);
});
Ext.ux.TreeCombo.superclass.initComponent.call(this);
}
})
Ext.reg("treecombo", Ext.ux.TreeCombo);
使用示例:
{
xtype : 'treecombo',
name : 'areaName',
tplId : 'tree_tpl',
rootVisible : true,
rootText : '全国',
url : 'loadArea',
fieldLabel : '地区',
maxHeight : 300,
value : '全国',
hiddenValue : '000000',
anchor : '95%'
}
不过通过formPanel.getForm().getValues()是获取不到treecombo的值的,需要自己手工调用
var treeValue = treeCombo.getHiddenValue();
treeCombo是上面控件的实例
然后通过Ext.apply(formJSON,{areaName:treeValue})对用formJSON中的显示值进行替换
http://raywithu.iteye.com/admin/blogs/1139509
- 大小: 12 KB
分享到:
相关推荐
extjs实现的下拉树的核心代码,包括js,jsp,对有需要的同仁提供参考与学习之用
extjs 树形下拉列表框,可以进行数据选择,数据回显。
利用extjs6自带的treePicker插件,实现下拉树的效果
NULL 博文链接:https://lpcjrflsa.iteye.com/blog/1704537
Extjs4多选树,支持多选和单选,能够实现默认值选中,数据存放在json,里面有明确的提示信息。很适合初学者借鉴学习
extjs4 框架实现树形结构的下拉框,并支持多选、复选,项目中开发实际用到的,这里提供了前段的js代码,大家有用到的,可以进行参考。
ExtJs4实现下拉树选择框ComboTree, 文档中包含代码。
Extjs4 comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用。来源于网络,稍作修改。
实现树的下拉效果,和ExtJs的treecombox大同小异。
Extjs 4.1 下拉框 Tree 的实现(mvc)
本文实例为大家分享了Extjs实现下拉树效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>text8</title> <link rel="stylesheet...
thinkphp+extjs +jquery CMS管理系统 实现多选下拉树 下拉表格
Extjs4 带复选框的树(Checkbox tree) Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充combobox数据 Extjs4中up()和down()的用法 ExtJS4学习笔记(一)---window的创建 ...
在Ext官方的例子中只有下拉列表控件,但是在实际业务中只有下拉列表无法满足需求的,对于刚使用Ext的人来说,自定义一个控件好难,下面是具体的实现
三、实现Window的最小化功能 87 四、小结 91 第十五章:Panel的子类——FormPanel 93 一、无处不在的表单 93 二、Ext.form.FormPanel类 93 三、提交表单至服务器 97 四、小结 100 第十六章:更多表单组件 102 一、您...
最后利用一个商品信息管理系统和一个企业任务管理系统,向读者演示了ExtJS在实际项目中的应用以及实现流程。 《精通JS脚本之ExtJS框架》附有配套光盘,提供了书中实例的源代码和视频教学文件。此外,读者还可以...
最后利用一个商品信息管理系统和一个企业任务管理系统,向读者演示了ExtJS在实际项目中的应用以及实现流程。 《精通JS脚本之ExtJS框架》附有配套光盘,提供了书中实例的源代码和视频教学文件。此外,读者还可以...
9.1. 下拉树形选择框TreeField 9.2. 带全选的checkbox树形CheckBoxTree 9.3. 带全选的checkbox的grid A. 常见问题乱弹 A.1. 怎么查看ext2里的api文档 A.2. 想把弹出对话框单独拿出来用的看这里 A.3. 想把...
7.5.11 树节点:ext.data.nodeinterface与ext.data.tree / 364 7.5.12 store的方法 / 366 7.5.13 store的事件 / 368 7.5.14 store管理器:ext.data.storemanager / 369 7.6 综合实例 / 369 7.6.1 远程读取json...