extjs_10_自己定义combotree组件

最新推荐文章于 2020-12-23 08:22:05 发布

weixin_30344795

最新推荐文章于 2020-12-23 08:22:05 发布

阅读量221

点赞数

文章标签： ux javascript json ViewUI

原文链接：http://www.cnblogs.com/xfgnongmin/p/10768400.html

版权

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>

转载于:https://www.cnblogs.com/xfgnongmin/p/10768400.html

weixin_30344795

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
extjs_10_自己定义combotree组件

1.项目截图2.treedata.json{ text : "root", expanded : true, expandable : true, children : [{ text : "Dept 1", leaf : false, expan...
复制链接

扫一扫