- 浏览: 481342 次
- 性别:
- 来自: 福州
文章分类
最新评论
-
学渣村的好村长:
很
java 列表转树形 -
wawj0819:
...
java 列表转树形 -
fireinjava:
LyAn_爱踢爱死 写道我有疑问,关于数组时你说collect ...
mybatis sql in 查询 -
LyAn_爱踢爱死:
我有疑问,关于数组时你说collection="ar ...
mybatis sql in 查询 -
yrsheng:
不行!楼主你真的试过吗?
Spring mvc 传递数组
参考:http://www.extjs.com/forum/showthread.php?38654-Tree-in-a-Combo./page4
在别人基础上稍作修改
1.添加hiddenName,使传值时跟Ext.form.ComboBox类似;
2.设值时展开整棵树(在TreeCombo外实现),使弹出下拉框时默认选中节点;
代码如下:
/** * @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:选择页面,在定义了根节点的情况下逐级加载
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;});
后台请求回来的数据如: [{text:'业务23',id:'200024'},{text:'业务2',id:'200043'}]
2.显示并修改(expandAll后再setValue)
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();
后台请求返回的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)
后台数据返回对应项即可 [{"value":"200043","display":"业务2"}]
----------------------2012-12-04-------补充个用静态树的例子---------备忘---------------------------
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-------补充只读不可编辑---------备忘---------------------------
onTriggerClick : function() { if(!this.disabled){//modify 20121204 this.getTree().show(); this.getTree().getEl().alignTo(this.wrap, 'tl-bl?'); } },在原来的基础上加个判断,这样treeCombo.disable();后点击下拉箭头就能不让下拉了。
评论
7 楼
baayso
2013-04-07
感谢!
6 楼
whatsgirl
2012-11-13
能发个demo给我吗 或者加我QQ下 我想研究一下 6450915 多谢
5 楼
fireinjava
2012-11-12
TreeCombo
var cmp = new TreeCombo() ;
cmp.renderTo('divID')
...
你查下ext自带例子吧
本宫太傲 写道
html标签里是怎么调用显示的阿?》。。。
var cmp = new TreeCombo() ;
cmp.renderTo('divID')
...
你查下ext自带例子吧
4 楼
本宫太傲
2012-11-12
html标签里是怎么调用显示的阿?》。。。
3 楼
zhylfhy
2011-12-14
能否把demo的附件发上来,谢谢
2 楼
fireinjava
2011-02-22
59471032 写道
能否把demo的附件发上来,学习下
你如果用Struts的话,直接在调用.do访问Action的方法
return "[{text:'业务23',id:'200024'},{text:'业务2',id:'200043'}]"即可
其它Ajax调用的类似。
1 楼
59471032
2011-02-21
能否把demo的附件发上来,学习下
发表评论
-
Ext 必填项 *
2010-05-13 01:33 9601方法1:在items中加*号 var short ... -
Ext 对iframe中的panel进行doLayout
2010-03-19 23:09 4116问题描述如:http://www.iteye.com/prob ... -
Portal 拖动 保存位置
2010-03-18 22:20 3480随机排列后按保存,则portal拖动后用json串保存其拖动后 ... -
HtmlEditor Readonly 或 Disabled
2009-12-15 17:19 2702利用Panel的mask()方法。 这种取巧的方法跟我的另一 ... -
Tabpanel标题active样式修改
2009-12-07 15:15 2691做出来后的效果如下: 用到的图: 把图片添加 ... -
Ext FieldSet 布局
2009-10-23 09:18 5046网上找了很多Ext FieldSet 布局的, 其实只要把布 ... -
Ext结合Struts的Session超时处理
2009-10-09 23:06 4089配置struts.xml文件的默认拦截器(注:登录的actio ... -
Ext的CheckboxSelectionModel默认选中
2009-10-09 22:37 13761说明:勾选某几条记录后,翻页再翻回来,保持原来的选中状态。 ... -
表单布局 tableLayout与columnLayout 及文本框跨列
2009-09-04 17:03 6274var objCd = new Ext.form.Tex ... -
Ext背景遮罩
2009-08-13 09:59 1620FormPanel的disabled:true时,置灰不好看, ... -
Ext.Button 在Ext.form.FormPanel中的定位
2009-07-03 14:29 3233主要原理: 利用{html : '<pre> &l ...
相关推荐
TreeCombo是Ext JS库中的一个组件,它结合了树形结构和下拉框的功能,为用户提供了一种在有限空间内展示复杂数据结构的选择方式。在Web应用开发中,这种组件非常实用,尤其当用户需要从层次化的选项中进行选择时。 ...
而在某些情况下,我们可能需要在下拉框中展示树形结构的数据,这就是EXT COMBO TREE的用武之地。 EXT COMBO TREE是EXT COMBO的一种扩展,它允许用户在下拉菜单中以树形结构展示数据。这在处理层级关系或者分类数据...
ExtJS 4 下拉树(TreeCombo)是一种组合控件,它将传统的下拉框与树形结构结合在一起,提供了一种在有限空间内展示层级数据的高效方式。这种控件在很多场合都非常实用,例如在需要用户选择分类或者层级结构的场景中...
下拉树是UI设计中一个实用的元素,它将传统下拉列表与树形结构相结合,用户在下拉框中可以看到层次化的选项,这在需要展示多级分类或者有层级关系的数据时非常有用。例如,在选择国家/地区、组织架构或产品分类等...
在ExtJS 4.x框架中,ComboboxTree是一种特殊的组件,它将传统的下拉框与树形结构结合在一起,提供了一种更为灵活的用户输入方式。这种组件在数据选择上非常实用,尤其当数据层级关系复杂时,可以方便地进行多选或...
它是将传统的下拉框(ComboBox)和树形控件(Tree)结合起来的一种复合组件,用户可以从树形结构中选择某个节点,同时这个选择的动作会反映到下拉框上。这样的设计不仅节省空间,还能直观地展现层次关系。 从代码...
ComboBoxTree是ExtJS4中的一个自定义组件,它结合了ComboBox(下拉框)和TreePanel(树形面板)的功能。ComboBox通常用于提供一个下拉列表供用户选择,而TreePanel则用于展示层次结构的数据。ComboBoxTree将这两者...
ComboBox用于展示树状结构的选项,而Tree Panel则负责加载和显示实际的树形数据。 ```javascript var treeCombo = Ext.create('Ext.form.ComboBox', { fieldLabel: '连锁总店', queryMode: 'local', editable: ...
menu.json json格式数据,模拟从后台返回的json数据 PinyinFilter.js:提供进行拼音过滤所需要的函数 ...TreeCombo.js:树形下拉框组件(依赖于TreeFilter.js) comboTreeTest.js:comboTree.html运行用的JS文件