- 浏览: 152185 次
- 来自: 上海
文章分类
最新评论
-
wahahachuang5:
web实时推送技术使用越来越广泛,但是自己开发又太麻烦了,我觉 ...
使用 HTML5 WebSocket 构建实时 Web 应用 -
wb1991wb:
zjarcher 写道你这种方法,Dog是否还是Animate ...
JS继承机制的实现 -
zjarcher:
你这种方法,Dog是否还是Animate?如何判断?
JS继承机制的实现 -
liuxin0577:
rest已经写好了,用正常的项目也可以访问到返回值,但是放到这 ...
【叨、校长】PhoneGap+jQuery Mobile+Rest 访问远程数据 -
urboat29:
怎么没了下不了,求发邮箱1419335455@qq.com
【叨、校长】TetrisGrid:基于ExtJs Grid实现的一个俄罗斯方块
本插件继承于ComboBox!通俗易懂、老少皆宜、不论男女!---叨、校长
由于网上找的插件大多都有bug,特别自己重写了一个,简单实用!
详细说明,与使用范例请看插件注释!
/** * @description 基于Ext3.4版本实现的(其他版本或许支持,未测!)一个多选下拉树插件! * 实现功能:1、多选节点! * 2、自动选中下拉框中已有的节点! * 3、自动将树节点TEXT赋值给插件的显示值(setValue())! * @author 叨、校长灬 * @example 参数nodes example:"[{text:'第一',leaf:true,checked:false},{text:'第二',leaf:true,checked:false},{text:'第三',leaf:true,checked:false},{text:'第四',leaf:true,checked:false}]" * 支持一切动态树加载方式! * { xtype:"xz_combotree", tree:new Ext.tree.TreePanel({ root: new Ext.tree.AsyncTreeNode({ text:'root', expanded: true, children:Ext.decode(nodes) }), autoScroll:true, rootVisible:false }) } */ Ext.namespace("Ext.daoXz"); Ext.daoXz.ComboBoxTree= Ext.extend(Ext.form.ComboBox,{ store : new Ext.data.SimpleStore({ fields : [], data : [[]] }), mode : 'local', triggerAction : 'all', maxHeight : 200, selectedClass : '', onSelect : Ext.emptyFn, initComponent:function(){ Ext.daoXz.ComboBoxTree.superclass.initComponent.call(this); var _this=this; var userH=this.tree.treeHeight; var xzH=this.maxHeight; var myHeight=userH>xzH?xzH:userH; this.tplId = Ext.id(); this.tpl = '<div id="' + this.tplId + '" style="height:'+myHeight+';";overflow:auto;"></div>'; this.tree.on("checkchange",this.changeValue,this); this.tree.on("beforeappend",this.renderNodeCheckedStates,this); }, //重写onViewClick方法,阻止下拉树点击时自动关闭! onViewClick : function(doFocus) { var index = this.view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index); if (r) { this.onSelect(r, index); } else if (s.getCount() === 0) { this.collapse(); } if (doFocus !== false) { this.el.focus(); } }, //监听下拉框expand事件,渲染treepanel listeners:{ "expand":{ fn:function(){ if (!this.tree.rendered && this.tplId) { this.tree.render(this.tplId); } this.tree.render(this.tplId); }, single:true } }, //对插件设置显示值! setShowValue:function(val,checked){ var temp=this.getValue(); var allValue=""; if(checked){ if(temp==""){ allValue=val; }else{ allValue=temp+","+val; } }else{ allValue=val; } //调用父类方法 this.setValue(allValue); }, //树节点checked事件的实现,对插件进行赋值和清除已选的值! changeValue:function(node,checked){ var text=node.text; if(checked){ this.setShowValue(text,checked); }else{ var s=this.getValue(); var r=this.getRawValue(); if(s.indexOf(text)==0&&s.indexOf(",")==-1){ s=s.replace(text,""); }else if(s.indexOf(text)==0&&s.indexOf(",")!=-1){ s=s.replace(text+",",""); }else{ s=s.replace(","+text,""); } this.setShowValue(s,checked); } }, //自动选中已经赋值的节点! renderNodeCheckedStates:function(tree,pnode,node){ var text=this.getValue(); var array=text.split(","); var size=array.length; for(var i=0;i<size;i++){ if(array[i]==node.text){ node.attributes.checked=true; } } } }) Ext.reg('xz_combotree', Ext.daoXz.ComboBoxTree);
实例JSP:<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'index.jsp' starting page</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script> <script type="text/javascript" src="js/ComboTree_xz.js"></script> <script type="text/javascript"> Ext.onReady(function() { ///var nodes="[{text:'第一',id:'first',leaf:true,checked:false},{text:'第二',id:'second',leaf:true,checked:false},{text:'第三',id:'third',leaf:true,checked:false},{text:'第四',id:'fouth',leaf:true,checked:false}]"; var nodes="["; for(var i=0;i<20;i++){ if(i!=19){ nodes+="{text:'第"+i+"',leaf:true,checked:false},"; }else{ nodes+="{text:'第"+i+"',leaf:true,checked:false}"; } } nodes+="]"; new Ext.Window({ width:300, height:400, items:[{ xtype:"xz_combotree", id:"myCombo", value:"第0,第10", tree:new Ext.tree.TreePanel({ root: new Ext.tree.AsyncTreeNode({ text:'root', expanded: true, children:Ext.decode(nodes) }), autoScroll:true, rootVisible:false }) },{ xtype:"button", handler:function(){ alert(Ext.getCmp("myCombo").getValue()); alert(Ext.getCmp("myCombo").getRawValue()); } }] }).show(); }); </script> </head> <body> <div id="column-group-grid"></div> </body> </html>
- ComboTree_xz.zip (1.7 KB)
- 下载次数: 42
发表评论
-
【叨、校长】TetrisGrid:基于ExtJs Grid实现的一个俄罗斯方块
2013-01-12 00:25 2817TetrisGrid--Master、Dao 在线演 ... -
【叨、校长】CopyGrid v1.1,基于ExtJs的可复制Excel数据的GridPanel
2012-12-29 21:53 1323CopyGrid v1.1; 基于Extjs 3.x版 ... -
【叨、校长】ITEye首发CopyGrid,基于ExtJs的可复制Excel数据的GridPanel
2012-12-23 22:58 1284基于Extjs 3.x版本编写的一个可直接复制、粘贴Excel ... -
【叨、校长】ExtJS Portal插件,基于Cookie添加保存位置状态功能
2012-12-23 14:52 1343该插件基于ExtJs 3.X版本的第三方UX Portal插件 ... -
【叨、校长】一个基于Extjs、Pushlet美轮美奂的Web聊天室
2012-11-08 21:47 2858本实例基于pushlet官方实例。通俗易懂、老少皆宜! --叨 ... -
【叨、校长】Extjs 动态表头GridPanel
2012-11-06 09:59 1196var columnArray=["2012-01& ... -
【叨、校长】DIV大小随窗口改变、Ext Panel放大功能的实现
2012-09-09 20:39 1769<html> <head> ... -
【叨、校长】Ext Window显示在最外层的方法
2012-08-08 16:01 1107方法:new top.Ext.Window({}); 就 ... -
【叨、校长】Extjs 双表头Grid
2012-07-26 19:53 2191本教程改自官方实例!通俗易懂、老少皆宜!---叨、校长 直接 ... -
【叨、校长】Extjs通过Ajax请求后台Struts2返回一个json对象
2012-06-17 10:40 2420首先:新建一个java web项目,添加struts2的支持, ... -
DWR+EXTJS 加载GRID数据
2012-06-07 22:29 10141、使用插件 DWRProxy.js 2、JS代 ... -
java开发中的时间类型
2012-04-01 11:23 10371、java时间类型的转换 * 时间类型格式化: Date ... -
Ext 动态改变button的图标
2011-10-24 16:54 1294使用iconCls配置项配置默认图标 使用getCmp(“要 ... -
Extjs 正则表达式
2011-10-18 13:02 1333name : 'employee.empNo', r ... -
QueryRunner的基本使用
2011-10-14 16:02 5489对web项目配置好Spring的支持,配置完成applicat ... -
Myeclipse快捷键和提示功能
2011-10-13 09:21 11541、提示键配置一般默认 ... -
Myeclipse安装spket插件(下载插件包安装)
2011-10-11 09:06 1670<script type="text/ja ...
相关推荐
ExtJs4实现下拉树选择框ComboTree, 文档中包含代码。
EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档EXT.JS_文档...
ext js 下拉树 真正可执行 包括引入的js和css
采用同步树原理,真正可以直接用的下拉树,,希望对你有帮助
Ext_Designer_Preview_ext可视化环境_智能感知
看看就知道了,不错的下拉树,异步加载树节点,使用Ext做的 下拉树
S4ROM打包工具,ext4_utils_new ./make_ext4fs -s -l 2088M -a system leilei.img system ./sgs4ext4fs --bloat leilei.img system1.img
RD161 - CO2144_WiFi_Ext_Modem_16_4420_20(含原理图)RD161 - CO2144_WiFi_Ext_Modem_16_4420_20(含原理图)RD161 - CO2144_WiFi_Ext_Modem_16_4420_20(含原理图)RD161 - CO2144_WiFi_Ext_Modem_16_4420_20(含原理图)...
ext4文件系统相关工具,比如制作ext4文件系统镜像
ext的树的实例.通过右键菜单操作树节点对数据库进行增删改查.
Ext下拉列表树,任何版本都可使用,只要下载即可使用。
项目是myeclipse的web项目,导入项目即可,自己添加ext的js和css文件,资源中没有加入ext的基础文件
Ext6.0文档教学_ext_web_手册.zip
ext_表单提交_数据校验 ext_表单提交_数据校验
Extjs 调用Java Json的例子。完整
供应商库存查询平台C#EXT4_C#_excellentixg_ext4_ERPC#_库存_源码.rar
供应商库存查询平台C#EXT4_C#_excellentixg_ext4_ERPC#_库存.zip
java结合ext的例子,方便大家学习,功能简单但很实用
Ext js 2.2框架的中文版本api