extjs_10_自定义combotree组件

1.项目截图

2.treedata.json

{
	text : "root",
	expanded : true,
	expandable : true,
	children : [{
				text : "Dept 1",
				leaf : false,
				expandable : true,
				children : [{
							text : "user1",
							leaf : true
						}, {
							text : "user2",
							leaf : true
						}, {
							text : "user3",
							leaf : true
						}]
			}, {
				text : "Dept 2",
				leaf : false,
				expandable : true,
				children : [{
							text : "user4",
							leaf : true
						}, {
							text : "user5",
							leaf : true
						}, {
							text : "user6",
							leaf : true
						}, {
							text : "user7",
							leaf : true
						}, {
							text : "user8",
							leaf : true
						}]
			}]
}

3.ComboTree.js

Ext.define("Ext.ux.ComboTree", {
	extend : "Ext.form.field.ComboBox",
	alias : "widget.combotree",
	url : "",
	tree : {},
	initComponent : function() {
		// tpl下拉框显示内容 displayTpl文本框显示内容
		this.treeid = Ext.String.format("combo-tree-{0}", Ext.id());
		this.tpl = Ext.String.format("<div id={0}></div>", this.treeid);

		if (this.url) {// 判断url是否配置
			var me = this;
			var treeStore = Ext.create("Ext.data.TreeStore", {
				root : {
					expanded : true
				},// 默认展开
				proxy : {
					type : "ajax",
					url : this.url
				}

			});
			this.tree = Ext.create("Ext.tree.Panel", {
				rootVisible : false,// 不显示根节点
				autoScorll : true,
				height : 200,
				store : treeStore
			});
			this.tree.on("itemclick", function(combo, record) {// 监听tree的点击事件
				if (me.fireEvent("select", me, record))// 有级联操作的时候要这样写(第一个combobox引发第二个combobox过滤)
				{
					me.setValue(record);
					me.collapse();// 折叠节点
				}
			});
			this.on("expand", function() {// 展开的时候渲染
				this.tree.store.load();// 展开的时候重新渲染数据,保证数据是最新的
				if (!this.tree.rendered) {// 判断是否渲染
					this.tree.render(this.treeid);// 渲染
				}

			});
			// if(me.fireEvent("select",me,record)) 不写的时候不能监听select事件
			this.on("select", function(combo, record) {
				Ext.Msg.alert("Title", "you selected " + record.data.text);
			})
		}
		this.callParent();
	}

})

4.comboboxtree.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>自定义分页组建</title>

<!-- 引入样式,可以把ext-all.css换成ext-all-access.css |  ext-all-gray.css改变样式-->
<link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css">
<!-- 开发模式引入ext-all-debug.js,发布模式引入ext-all.js -->
<script type="text/javascript" src="./extjs4.1/ext-all-debug.js"></script>
<!-- 语言包 -->
<script type="text/javascript" src="./extjs4.1/locale/ext-lang-zh_CN.js"></script>
<!-- 引入自定义分页 -->
<script type="text/javascript" src="./extjs4.1/ux/ComboTree.js"></script>

<script type="text/javascript">
	Ext.onReady(function() {
		Ext.Loader.setConfig({
			paths : {
				"Ext.ux" : "extjs4.1/ux"
			}
		});

		Ext.create("Ext.ux.ComboTree", {
			url : "extjs4.1/data/treedata.json",
			valueField : "text",
			displayField : "text",
			queryMode : "local",
			renderTo : Ext.getBody(),
			fieldLabel : "ComboTree"
		})

	});
</script>

</head>

<body>
	<br>
</body>
</html>

extjs_10_自定义combotree组件

时间: 2024-10-21 22:41:00

extjs_10_自定义combotree组件的相关文章

自定义SlidingMenu组件

在网上学习了自定义slidingmenu组件,这里记录下其中的关键点. SlidingMenu其实是一个HorizontalScrollView,里面有两个布局,通过重写几个方法达到侧滑的效果. 首先原理是在LinearLayout外嵌套了HorizontalScrollView,SlidingMenu继承HorizontalScrollView. 重写onMeasure(int widthMeasureSpec, int heightMeasureSpec),onLayout(boolean

Ember.js 入门指南——自定义包裹组件的HTML标签

按照惯例,先做好准备工作,使用Ember CLI命令生成演示所需的文件: ember g route customizing-component-element ember g component customizing-component-element ember g route home ember g route about 默认情况下,组件会被包裹在div标签内.比如,组件渲染之后得到下面的代码: <div id="ember180">   <h1>M

java实现自定义同步组件的过程

实现同步组件twinsLock:可以允许两个线程同时获取到锁,多出的其它线程将被阻塞. 以下是自定义的同步组件类,一般我们将自定义同步器Sync定义为同步组件TwinsLock的静态内部类. 实现同步器需要继承AbstractQueuedSynchronizer并覆盖相应的方法. package com.lock; import java.util.concurrent.TimeUnit;import java.util.concurrent.locks.AbstractQueuedSynchr

Flex 自定义 Zlert 组件!

说明: 原生的 Alert.show 参数,要显示的按钮你只能 Alert.OK | Alert.Cancel 这样; 自定义 Zlert 参数跟原生的 差不多,按钮写法是这样写的: {"btnId":"确定", "btnId2":"其他按钮名称"} ZlertWindow.mxml: com/components <?xml version="1.0" encoding="utf-8&qu

自定义JS组件——系列1(TableGrid | Toolbar | LinkButton | Pager)

2月份第一次JS组件,写了几个:TableGrid, Toolbar, LinkButton, Pager,现在发出来. TableGrid可以包含Toolbar, Pager. Toolbar可以包含LinkButton.这样就构成了具有工具栏.分页栏的数据表格控件.也就是说,这4个组件可以独立使用,也可以结合使用.通篇只采用一种结构来编写,若能看懂编写规则,往后就可以按照这种模式自定义JS控件了. 1 var fjn=fjn?fjn:{}; 2 (function($,global){ 3

Android Studio开发基础之自定义View组件

一般情况下,不直接使用View和ViewGroup类,而是使用使用其子类.例如要显示一张图片可以用View类的子类ImageView,开发自定义View组件可分为两个主要步骤: 一.创建一个继承自android.view.View类的View类,并且重写构造方法. 如下,新建一个名为MyView.Java的Java类文件,重写一个带Context的构造方法和onDraw()方法(用来重新绘制Activity窗口的背景). package com.example.lhb.contentprovid

自定义Android组件之组合方式创建密码框组件

Android中所有控件(也称组件)都继承自adnroid.view.View类,android.view.ViewGroup是View类的重要子类,绝大多书的布局类就继承自ViewGroup类. 附上一张基于Android Api21的View和Widget类图 自定义Android组件基本可以从2个入口着手,一是继承Viewe类拿起画笔和画布绘制组件,而是通过继承View的子类和组合已有的组件的方式构造自定义的组件. 本文通过自定义一个PassWordView组件来实现密码能够通过点击点选框

#003 React 组件 继承 自定义的组件

主题:React组件 继承 自定义的 组件 一.需求说明 情况说明: 有A,B,C,D 四个组件,里面都有一些公用的逻辑,比如 设置数据,获取数据,有某些公用的的属性,不想在 每一个 组件里面写这些属性,怎么办? [和 面向对象的语言,C#,Java 的基类 思想是 一样的] 如果公用的东西,是一些方法,可以 使用 React 的 Mixins(ES5) ,高阶组件(ES6)[高阶函数不太了解,如何使用,去找下资料 ] 但是如果有公用的属性,那么就有点 力不从心了 在想,React 中,是否可用

【Android 应用开发】 自定义 View 组件 -- 圆形进度条

转载著名出处 : http://blog.csdn.net/shulianghan/article/details/40351487 代码下载 : -- CSDN 下载地址 : http://download.csdn.net/detail/han1202012/8069497 ; -- GitHub 地址 : https://github.com/han1202012/CircleProcess.git ; -- 工程示例 : 一. 相关知识点解析 1. 自定义 View 组件构造方法 构造方