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组件的更多相关文章
- vue.2.0-自定义全局组件
App.vue <template> <div id="app"> <h3>welcome vue-loading</h3> < ...
- 第六章 组件 55 组件-使用components定义私有组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- TZ_16_Vue定义全局组件和局部组件
1.定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <co ...
- vue定义全局组件
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...
- Django-自定义分页组件
1.封装的分页代码: class PageInfo(object): def __init__(self,current_page,all_count,per_page,base_url,show_p ...
- 初学React：定义一个组件
接着聊React,今天说说如何创建一个组件类. <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 使用模块定义AngularJS组件
一.模块创建/查找 module 当创建一个模块时,必须指定name和requires参数,即使你的模块并不存在依赖 var myApp=angular.module("exampleApp ...
- WeChat-SmallProgram：如何定义一个组件
创建组件所需的文件: 1.在根目录创建 Componet 文件夹 2.再创建一个select文件夹 3.然后:右键这个文件夹,新建下面的这个 Component.然后输入需要创建的名称,我这里为了方便 ...
- WinForm------自定义YearMonthEdit组件
转载: http://www.cnblogs.com/axing/p/3201066.html 注意: 1.需要在vs里面,添加一个YearMonthEdit组件,然后将链接里面的代码拷贝到里面 2. ...
随机推荐
- EmailHelper
注:个人邮箱发送时需要将邮箱密码设置为邮件授权码 邮件发送帮助类一: public class EmailHelper { /// <summary> /// 发送邮件 /// </ ...
- 【NET Core】事务TransactionScope
.NET FrameWork时期: TransactionScope是FCL System.Transactions命名空间下的分布式事务组件,它默认为本地事务,当系统有需要时可以自动提升为分布式事务 ...
- C/C++.判断文件是否存在(_access)
1. int _access(char* path,int mode)头文件<io.h>功能:确定文件或文件夹的访问权限.如果指定的存取方式有效,则函数返回0,否则函数返回-1. 参数pa ...
- [原]Universal Windows问题：winapifamily问题：WINAPI_PARTITION_DESKTOP问题：WINAPI_PARTITION_APP问题：WINAPI_FAMILY_PARTITION(WINAPI_PARTITION_DESKTOP)问题
问题回顾: 我新建的生成dll的vs问题: 此vs项目包含需要GL.h 结果此文件声明的GLint找不到! 进去发现#if WINAPI_FAMILY_PARTITION(WINAPI_PARTITI ...
- Yahoo Programming Contest 2019 F - Pass
F - Pass 思路: dp[i][j] 表示到第 i 个球为止放了 j 个蓝球的方案数 第 i 个球来自的位置的最右边是min(i, n) 转移方程看代码 代码: #pragma GCC opti ...
- h5设计图尺寸
640 标准的话 设计图: 640*1136 body,html 背景图的话需要640*1008的 这样才能整屏刚刚好 750 标准的话 设计图: 750*1334 body,html背景图的话,75 ...
- 【文献08】多移动机器人轨迹跟踪控制系统设计与实现-运动学ADRC控制
参考: 陈俊, 俞立, 滕游. 多移动机器人轨迹跟踪控制系统设计与实现[J]. 计算机测量与控制, 2017(7). https://drive.wps.cn/view/p/28819052019?f ...
- VUE.js 简单引用
Vue开发的两种方式:静态资源引入开发 和 脚手架交互式开发 这里使用的是静态资源引入开发 首先 引用jquery.js 和 vue.js html 标签内加个 <div id=" ...
- Matlab:五点差分方法求解椭圆方程非导数边值问题
差分格式脚本文件: tic; clear clc M=32;%x的步数 N=16;%y的步数 h1=1/M;%x的步长 h2=1/N;%y的步长 x=0:h1:1; y=0:h2:1; u=zeros ...
- linux下无root 安装activepython到指定目录
linux下无root 安装activepython 1.下载ActivePython-2.7.8.10-linux-x86_64.tar.gz 包 2.进入非root用户,如bdc用户,解压 [bd ...