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组件的更多相关文章

  1. vue.2.0-自定义全局组件

    App.vue <template> <div id="app"> <h3>welcome vue-loading</h3> < ...

  2. 第六章 组件 55 组件-使用components定义私有组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. TZ_16_Vue定义全局组件和局部组件

    1.定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <co ...

  4. vue定义全局组件

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...

  5. Django-自定义分页组件

    1.封装的分页代码: class PageInfo(object): def __init__(self,current_page,all_count,per_page,base_url,show_p ...

  6. 初学React：定义一个组件

    接着聊React,今天说说如何创建一个组件类. <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. 使用模块定义AngularJS组件

    一.模块创建/查找 module 当创建一个模块时,必须指定name和requires参数,即使你的模块并不存在依赖 var myApp=angular.module("exampleApp ...

  8. WeChat-SmallProgram：如何定义一个组件

    创建组件所需的文件: 1.在根目录创建 Componet 文件夹 2.再创建一个select文件夹 3.然后:右键这个文件夹,新建下面的这个 Component.然后输入需要创建的名称,我这里为了方便 ...

  9. WinForm------自定义YearMonthEdit组件

    转载: http://www.cnblogs.com/axing/p/3201066.html 注意: 1.需要在vs里面,添加一个YearMonthEdit组件,然后将链接里面的代码拷贝到里面 2. ...

随机推荐

  1. npm init 命令生成package.json文件

    通过npm init 命令可以生成一个package.json文件.这个文件是 整个项目的描述文件.通过这个文件可以清楚的知道项目的包依赖关系,版本,作者等信息.每个NPM包都有自己的package. ...

  2. 一起用ipython

    安装 安装python2版本的软件包就用命令 pip install ipython 安装python3版本对应的软件包就用命令 pip3 install ipython 进入了ipython,ipy ...

  3. Python里面的write（）方法写入文件时候的乱码解决方法

    为了为今后的大数据以及人工智能的大潮流的到来做准备,最近在学Python,在这个过程中,会遇到许多汉字之间的转换,今天在写write方法的时候,发现写入的汉字会出现乱码,百思不得其解,上网查众资料,, ...

  4. guxh的python笔记八：特殊方法

     1,类的特殊方法  新建一个类,本章内容中的特殊方法如果不创建类或新增方法,默认使用的就是下面的类: class Foo: """this is Foo"&q ...

  5. python-html基础操作

    介绍: HTML  是网页内容的载体.包括文字,图片,信息等用户浏览的信息CSS   样式是改变内容外观表现.像字体,颜色,背景,边框等JavaScript   是实现网页上的特效效果.如鼠标滑过背景 ...

  6. 数据结构与算法之PHP排序算法（插入排序）

    一.基本思想 插入排序算法是每一步将一个待排序的数据插入到前面已经排好序的有序序列中,直到所有元素插入完毕为止.   二.算法过程 1)将第一个元素看做一个有序序列,把第二个元素到最后一个元素当成是未 ...

  7. Python 同一文件中，有unittest不执行“if __name__ == '__main__”，不生成HTMLTestRunner测试报告的解决方案

    1.问题:Python中同一个.py文件中同时用unittest框架和HtmlReport框架后,HtmlReport不被执行. 2.为什么?其实不是HtmlReport不被执行,也不是HtmlRep ...

  8. ELK+MySQL出现大量重复记录问题处理

    一.使用Logstash使用jdbc从MySQL读取数据操作 1.1 安装jdbc插件 jdbc默认已安装,如果没安装使用logstash-plugin安装即可(logstash-plugin在log ...

  9. python3练习-查找文件

    题: 编写一个程序,能在当前目录以及当前目录的所有子目录下查找文件名包含指定字符串的文件,并打印出相对路径 import os import os.path def find_file(root,pa ...

  10. 微信小程序中对于变量的定义

    在页面对应的js文件中: page顶部使用let定义变量,这是定义的全局变量,在当前脚本页面,任何函数中都可以直接使用变量名调用.如果做修改,就直接使用变量等于要更改的值. 使用const定义变量,就 ...