文档章节

Extjs实现下拉树

请修改个人昵称
 请修改个人昵称
发布于 2016/04/01 11:29
字数 536
阅读 86
收藏 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text8</title>

	<link rel="stylesheet" type="text/css" href="../../../ext-4.2.1/resources/css/ext-all.css" >
	<script type="text/javascript" src="../../../ext-4.2.1/bootstrap.js"></script>

</head>
<body>
	<script>
       		Ext.define('TreeComboBox',{  
			    	extend : 'Ext.form.field.ComboBox',  
			    	store : {
			    		fields:[],
			    		data:[[]]
			    	},  
			    	width:300,
			    	editable : false,  
			    	allowBlank:false,  
			    	multiSelect : true,
			    	listConfig : {
			    		resizable:false,
			    		minWidth:150,
			    		maxWidth:250,
			    	},  
			    	_idValue : null,  
			    	_txtValue : null,  
			    	callback : Ext.emptyFn,  
			    	treeObj : null,  
			    	initComponent : function(){  
			        		this.treeObj=new Ext.tree.Panel({  
			            		border : false,  
			            		autoScroll : true,  
			            		rootVisible: false,  
			            		renderTo:this.treeRenderId,  
			            		root: 	{
			            			text: 'root',draggable: false,expanded: true,  
			                			children:[
			                				{
			                		 		text:'一级节点',expanded: true, checked:false ,
			                    				children:[
			                    					{ text:'二级节点1',leaf:true,checked:false},
			                    					{ text:'二级节点2',leaf:true,checked:false}
			                    					]
			                    				} , 
			                    				{
			                		 		text:'一级节点',expanded: true, checked:false ,
			                    				children:[
			                    					{ text:'二级节点1',leaf:true,checked:false},
			                    					{ text:'二级节点2',leaf:true,checked:false}
			                    					]
			                    				}
			              			]
			              		} ,
			              	listeners:{
			              		checkchange:function(node,state){
			              			if(node.hasChildNodes()){
			              				for(var i=0;i<node.childNodes.length;i++){
			              					node.childNodes[i].set('checked',state);
			              					}
			              				}
			              			}
			              		}
			        		});       
			        	
			        		this.treeRenderId = Ext.id();  
			        		this.tpl = "<tpl><div id='"+this.treeRenderId+"'></div></tpl>";       
			        		this.callParent(arguments);  
			        		this.on({  
			            			'expand' : function(){  
			                			if(!this.treeObj.rendered&&this.treeObj&&!this.readOnly){  
			                    				Ext.defer(function(){  
			                        					this.treeObj.render(this.treeRenderId);  
			                    				},100,this);  
			                			}  
			        			}  
			    		});  
			        		
			        		this.treeObj.on('itemclick',function(view,rec){  
					        	/* var roonodes = this.treeObj.getRootNode().childNodes;   //获取主节点
					        	 var childnodes = node.childNodes;	//获取zi节点
					        	 if (roonodes.getView().getSelectionCount()==1) {
					        	 	for(var i=0;i<childnodes.length;i++){
					        	 		this.setValue(this._txtValue = rec.get('text'));   
					        	 	}
					        	 }*/
					            	if(rec){  
					            		//node.getUI().checkbox.indeterminate = true; //半选中状态  
					                	this.setValue(this._txtValue = rec.get('text'));                  
					                	//this.collapse();//关闭tree  
					            	}  
			        		},this);  
			    	},  
			});  
			  
		//实例化下拉树  
		var xltree1=new TreeComboBox({  
			fieldLabel : '下拉树1',  
			name:'xltree1111',  
			allowBlank:true  
		});   
		var xltree2=new TreeComboBox({  
			fieldLabel : '下拉树2',  
			name:'xltree2222',  
			allowBlank:true  
		});  
			  
			  
		Ext.create('Ext.form.Panel', {  
			renderTo: Ext.getBody(),  
			width: 500,  
			bodyPadding: 10,  
			title: 'TreeComboBox',  
			items: [xltree1, xltree2]  
		});  
	</script>
</body>
</html>

问题:当选中复选框时候,如何使全部选中的条目添加显示到combobox中?

效果:

下面是另一个:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tabpanel</title>

	<link rel="stylesheet" type="text/css" href="../../../ext-4.2.1/resources/css/ext-all.css" >
	<script type="text/javascript" src="../../../ext-4.2.1/bootstrap.js"></script>


</head>
<body>
	<script>
                Ext.onReady(function(){
                        Ext.create('Ext.window.Window',{
                                id: 'docaddId',
                                title: 'Preferences',
                                buttonAlign: 'center',
                                width:500,
                                layout:'fit',
                                //height:400,
                                resizable:false,

                                
                                items:
                                        Ext.create('Ext.tab.Panel', {
                                            //renderTo: Ext.getBody(),
                                                
                                            items: [{
                                                title: 'A',
                                                
                                                items:[
                                                
                                                //Process and associated workstation下拉选框
                                                {

					                xtype:'container',
					                fieldLabel:'Workstation',

					                items:[{
					                		xtype:"combobox",
					                	 	name : 'Process and associated workstation',    
								    fieldLabel : 'Workstation',    
								    id:'aaa',
								    layout:'fit',
								    width:480,
								    editable : false,    
								    allowBlank : false,    
								    multiSelect : true,    
								    store : {    
									fields : ['workstationId', 'workstationName'],    
									data : [    
									    {'workstationId':'0',workstationName:'workstation01'},    
									    {'workstationId':'1',workstationName:'workstation02'},    
									    {'workstationId':'2',workstationName:'workstation03'},    
									    {'workstationId':'3',workstationName:'workstation04'}    
									]    
								    },    
								    listConfig : {    
									itemTpl : Ext.create('Ext.XTemplate','<input type=checkbox>{[values.workstationName]}'),    
									onItemSelect : function(record) {    
									    var node = this.getNode(record);    
									    if (node) {    
										Ext.fly(node).addCls(this.selectedItemCls);    
										var checkboxs = node.getElementsByTagName("input");    
										if (checkboxs != null)    
										    var checkbox = checkboxs[0];    
										checkbox.checked = true;    
									    }    
									},    
									listeners : {    
									    itemclick : function(view, record, item, index, e, eOpts) {    
										var isSelected = view.isSelected(item);    
										var checkboxs = item.getElementsByTagName("input");    
										if (checkboxs != null) {    
										    var checkbox = checkboxs[0];    
										    if (!isSelected) {    
											checkbox.checked = true;    
										    } else {    
											checkbox.checked = false;    
										    }    
										}    
									    }    
									}    
								    },    
								    queryMode : 'remote',    
								    displayField : 'workstationName',    
								    valueField : 'workstationIda',    
					                }
					                ]

                                                }]
                                            }, {
                                                title: 'B'
                                            }, {
                                                title: 'C'                                        
                                            }, {
                                                title: 'D'                                           
                                            }]
                                        })                                 
                        }).show();

                });
	</script>
</body>
</html>

效果:

本文转载自:http://blog.csdn.net/cometnet/article/details/7569247

请修改个人昵称
粉丝 6
博文 55
码字总数 7496
作品 0
合肥
程序员
私信 提问
Ext GWT 2.2 Beta 发布

GWT-Ext 是基于 Google Web Toolkit(GWT) 和 ExtJs 的功能强大的网页开发控件库。它扩展了 GWT,在 ExtJs 的基础上实现了有排序功能的表格(Grid)、分页、过滤,支持有拖拽功能的树,高度...

红薯
2010/07/22
555
0
Dijit、ExtJS、jQuery UI 异同浅析

简介: 当今,各类 JavaScript 框架在前端开发中已经相当普及。Dojo、Ext jQuery 等主流 JavaScript 框架不仅提供了一系列核心 API 来屏蔽浏览器差异,简化 DOM 操作、增强 JavaScript 原生 ...

索隆
2012/02/21
520
0
XWorker的数据对象介绍

一年前XWorker被oschina收录并经常有邮件发过来,不过我倒是第一次在这里发帖。现在XWorker有一点实用了,故看看是否有人愿意参与或使用。 在编写Extjs时发现DataStore技术是一个好东西,因此...

zhangyuxiang
2012/01/12
462
0
项目中EXTjs中运用到的下拉树

首先是项目的环境是java,用到spring3.1.2的框架,展示数据用的是 EXTJs (1)js代码中: (2) loader: new Ext.tree.TreeLoader({dataUrl:'application/categoryTree.json?type=2'})在Control......

EDIAGD
2013/02/04
4K
1
FineUI大版本升级,外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架

FineUI v3.3.0 更新的内容非常多,所以一下子从 v3.2.6 连跳 3 个小版本,直接来到了 v3.3.0。 主要的更新有如下几个方面: 外置ExtJS库 去AXD化 表格合计行 表格可编辑单元格的增删改 顶部菜...

三生石上
2013/06/17
4K
7

没有更多内容

加载失败,请刷新页面

加载更多

数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
今天
4
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
今天
6
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
今天
4
0
Python机器学习之数据探索可视化库yellowbrick

背景介绍 从学sklearn时,除了算法的坎要过,还得学习matplotlib可视化,对我的实践应用而言,可视化更重要一些,然而matplotlib的易用性和美观性确实不敢恭维。陆续使用过plotly、seaborn,...

yeayee
今天
8
0
重读《学习JavaScript数据结构与算法-第三版》- 第5章 队列

定场诗 马瘦毛长蹄子肥,儿子偷爹不算贼,瞎大爷娶个瞎大奶奶,老两口过了多半辈,谁也没看见谁! 前言 本章为重读《学习JavaScript数据结构与算法-第三版》的系列文章,主要讲述队列数据结...

胡哥有话说
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部