- 浏览: 1180539 次
- 性别:
- 来自: 成都
最新评论
-
see1di:
你的這個function只能支持IE
js格式化显示xml -
away5678:
强烈推荐你学习ibatis,易学,灵活,易查错,效率高,以上都 ...
ibatis的点点心得 -
liuwei8728:
恩 说的也有道理
ibatis没学过 hibernate ...
ibatis的点点心得
弥补ExtJs CheckboxSelectionModel不能级联的自定义控件
- 博客分类:
- 学习过程
- javascript
由于 ExtJS 在做CheckboxSelectionModel的时候,没有考虑到会存在二级 三级等多级级联,导致目前存在做级联的时候,选择上级,往往会把下级 下下级选中,而实际上并没有被选中,只是视觉上view被选中了而已。项目中遇到此种情况,本来想改变界面原型的,单需求就这个样,改纠结了,一郁闷之下,将CheckboxSelectionModel的源代码做了修改,在使用的时候,需要将js和css一并引用:
js:
还不能将图片忘记了哈,附件为打包下载
js:
/* * Ext JS Library 2.0.0 * created by:raoyifeng * created at:2012-03-01 * licensing@extjs.com * */ Ext.grid.MyCheckboxSelectionModel = Ext.extend(Ext.grid.RowSelectionModel, { header: '<div class="x-grid3-hd-checker-my"> </div>', singleSelect:true, width: 20, sortable: false, menuDisabled:true, fixed:true, dataIndex: '', id: 'checker', initEvents : function(){ Ext.grid.MyCheckboxSelectionModel.superclass.initEvents.call(this); this.grid.on('render', function(){ var view = this.grid.getView(); view.mainBody.on('mousedown', this.onMouseDown, this); Ext.fly(view.innerHd).on('mousedown', this.onHdMouseDown, this); }, this); }, onMouseDown : function(e, t){ var hd = Ext.fly(t); if(e.button === 0 && hd.hasClass('x-grid3-row-checker-my')){ // Only fire if left-click e.stopEvent(); var row = e.getTarget('.x-grid3-row'); if(row){ var index = row.rowIndex; if(this.isSelected(index)){ this.deselectRow(index); }else{ this.selectRow(index, true); } } } var isChecked = hd.hasClass('x-grid3-row-checker-on-my'); if(isChecked){ hd.removeClass('x-grid3-row-checker-on-my'); }else{ hd.addClass('x-grid3-row-checker-on-my'); } }, onHdMouseDown : function(e, t){ if(t.className == 'x-grid3-hd-checker-my'){ e.stopEvent(); var hd = Ext.fly(t.parentNode); var parentNode=hd.parent().parent().parent().parent().parent().parent().parent().parent(); var hdP=Ext.fly(parentNode); var childs=hdP.query('.x-grid3-row-checker-my'); var isChecked = hd.hasClass('x-grid3-hd-checker-on-my'); if(isChecked){ hd.removeClass('x-grid3-hd-checker-on-my'); this.clearSelections(); if(childs!=null){ for(i=0;i<childs.length;i++){ Ext.fly(childs[i]).removeClass('x-grid3-row-checker-on-my'); } } }else{ hd.addClass('x-grid3-hd-checker-on-my'); this.selectAll(); if(childs!=null){ for(i=0;i<childs.length;i++){ Ext.fly(childs[i]).addClass('x-grid3-row-checker-on-my'); } } } } }, renderer : function(v, p, record){ return '<div class="x-grid3-row-checker-my"> </div>'; } });
.x-grid3-hd-row td,.x-grid3-row-my td,.x-grid3-summary-row td{font:normal 11px arial,tahoma,helvetica,sans-serif;-moz-outline:none;-moz-user-focus:normal;} .x-grid3-row-my td,.x-grid3-summary-row td{line-height:13px;vertical-align:top;padding-left:1px;padding-right:1px;-moz-user-select:none;} .x-grid3-row-my .x-grid3-marker{padding:3px;} .x-grid3-row-my{cursor:default;border:1px solid #ededed;border-top-color:#fff;width:100%;} .x-grid3-row-checker-my,.x-grid3-hd-checker-my{width:100%;height:18px;background-position:2px 2px;background-repeat:no-repeat;background-color:transparent;background-image:url(images/row-check-sprite.gif);} .x-grid3-row-my .x-grid3-row-checker-my{background-position:2px 2px;} .x-grid3-row-selected-my .x-grid3-row-checker-my,.x-grid3-hd-checker-on-my .x-grid3-hd-checker-my{background-position:-23px 2px;} .x-grid3-hd-checker-my{background-position:2px 3px;} .x-grid3-hd-checker-on-my .x-grid3-hd-checker-my,.x-grid3-row-checker-on-my{background-position:-23px 3px;} .x-grid3-row-checker-my, .x-grid3-hd-checker-my { width:100%; height:18px; background-position:2px 2px; background-repeat:no-repeat; background-color:transparent; background-image:url(images/row-check-sprite.gif); } .x-grid3-row-my .x-grid3-row-checker-my { background-position:2px 2px; } .x-grid3-row-selected-my .x-grid3-row-checker-my, .x-grid3-hd-checker-on-my .x-grid3-hd-checker-my { background-position:-23px 2px; } .x-grid3-hd-checker-my { background-position:2px 3px; } .x-grid3-hd-checker-on-my .x-grid3-hd-checker-my, .x-grid3-row-checker-on-my{ background-position:-23px 3px; } .x-grid3-hd-row-my td, .x-grid3-row-my-my td, .x-grid3-summary-row-my td{ font:normal 11px arial, tahoma, helvetica, sans-serif; -moz-outline: none; -moz-user-focus: normal; } .x-grid3-row-my td, .x-grid3-summary-row-my td { line-height:13px; vertical-align: top; padding-left:1px; padding-right:1px; -moz-user-select: none; } .x-grid3-row-my .x-grid3-marker-my { padding:3px; } .x-grid3-row-my { cursor: default; border:1px solid #ededed; border-top-color:#fff; /*border-bottom: 1px solid #ededed;*/ width:100%; } .x-grid3-row-checker-on-my{ background-position:-23px 3px; }
还不能将图片忘记了哈,附件为打包下载
- MyComponent.rar (2.4 KB)
- 下载次数: 2
发表评论
-
js格式化显示xml
2012-09-16 14:19 1099199javascript格式化显示xml,寻找了N久,终于找到一种 ... -
linux 安装python,设置环境变量
2011-06-15 00:10 3620linux下python开发环境之一——安装python :h ... -
jad 反编译jar
2011-06-01 12:18 15901、解压到任意目录 2、确保安装了winrar 3、点击反编译 ... -
eclipse中TOMCAT配置
2011-05-24 21:23 82301.在servers中新建的SERVER上右击——属性的Gen ... -
JRebel 热插件使用手记
2011-05-19 20:24 43131.1 安装IDE-rebel插件 1. Ecl ... -
VC++ 添加外部库文件lib和dll的步骤
2011-04-13 00:17 11641总结 连接数据库的步骤过程: 1.将文件sqlapi.lib ... -
自定义Dao,反射实现
2011-04-11 09:55 931自定义dao实现 -
javascript获取指定时间函数
2011-03-16 14:03 1419function WeekDate() { ... -
没有找到mfc90ud.dll,因此这个应用程序未能启动 解决方案
2011-01-20 22:44 16691.没有找到mfc90ud.dll,因此这个应用程序未能启动. ... -
VS 与IE兼容性问题
2011-01-08 18:47 1274今天用VS08,对话框控件添加变量时候出错, 变量类型无法选择 ... -
IBM MQ 资料
2010-10-10 20:02 3955MQ介绍 消息队列技术是 ... -
java 获取操作系统收集
2010-09-07 00:37 938判断当前java程序是运行在windows平台还是运行在lin ... -
集群学习一
2010-09-01 00:40 1051一、高可用性集群系统 ... -
Apache 的11大贡献
2010-08-29 13:09 817据国外媒体报道,转眼 ... -
学习过程问题总结
2010-08-08 23:57 800starUML 启动报错:system error code: ... -
RCP 在同一个透视图中同时打开多个同一个view
2010-07-27 15:09 5643扩展 org.eclipse.ui.views 来创建 vie ... -
一些好的文章收集
2010-07-04 21:45 805ibatis dynamic sql 语句拼接:http:// ... -
webservice 部署服务的几种方式总结
2010-05-09 00:39 3435java 调用webservice的各种方法总结 现 ... -
ibatis的多表查询
2010-05-09 00:34 2041一:描述下: 使用2个表,book,user表。一对多关 ... -
groovy的点点滴滴01(转)
2010-05-07 00:53 796一、 groovy 是什么 简单地说, Groovy 是下 ...
相关推荐
extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件
将文件拷贝到extjs根目录下。运行即可。实现了选中之类。父类联动选中
xtype : 'jxcombo' //配置项 jxValueField:要获取值得字段名称,默认null //公共方法 getJXValue():返回自定义字段的值,如果没有自定义字段,则等价Ext.form.Combo类的getValue()方法
该代码仅适用于ExtJs5.x, 使用方法: 在Extjs5.x.js文件后引入以下两文件,注意顺序和路径: 例如: <script type="text/javascript" src="ext/5.1/ext-all-debug.js"></script> ${src}/DateTimePicker.js"> ${src...
说明:本例主要实现在树节点数据过多的情况下对数据进行异步请求,并且在请求数据返回前台的同时实现级联选择。使用ExtJs版本为4.1.1a,在struts2下测试通过。例子仅供提供思路,简单易懂,不负责代码优化,哈哈!
extjs中 google 不兼容 datefield 控件
extjs 微调控件,时间微调控件,微调,javascript 微调 v2.0以上都可以用!!!
可以动态的新增和删除Ext控件,这里支持的上传控件的新增和删除。
由于extjs3.0自己封装的时间不能够选择时分秒,给大家开发...虽然网上有ext2.0的日期扩展控件,但在3.0中不能用。公司现在项目正用了,因此我就对extjs3.0时间控件的扩展,实现了可选择时分秒功能。希望对大家有帮助。
EXTJS的COMBOBOX级联实现和数据提交VALUE[文].pdf
在 ExtJS3.3基础上开发的. 低一点的版本应该也能用. 没有去测试. 参考: Ext.PagingToolbar.js 因为我开发测试完这个分页工具后, 电脑上显示刚好是15:00, 所以取名: PM3PagingToolbar 如有BUG还请各位提出或留言. ...
ExtJS 6.2.0包含文本及时间选择框的自定义查询控件的解决方案,下拉式控件
ExtJs自定义消息框,自带的消息框,可以下载来了解一下。
网上找了一些,不是运行不了,就是代码繁多复杂。所以自己试着写了一个扩展的时间日期控件,可选时分秒,包含项目源代码,下载可直接运行·
1.ExtJS自定义组件,图片按钮为例. 2.此图片按钮背景完全为图片,没有边框,需要使用者提供2张图片,一张初始化用,一张点击后用,可在'imgPaths:'属性里填写,格式为'01.jpg~02.jpg' 3.解压后请将所有附件放置您extjs...
extjs日期控件 年份的选择控件,不带月和日,只有年,亲测完美支持ext6.2,月份控件 monthfield只带年月
Extjs DateField控件 - 只选择年份(找了很久发现网上只有选择年月的控件,于是基于extjs年月控件设计了只选择年份的控件)
修改extjs控件,支持只选择年月,或者只选择年。 只要设置format:“Y-m”,"Y"即可。 xtype:'monthfield' 因为extjs的bug(3月30如果选择2月将自动变成3月)。所以需要修改monthField中safeParse方法: else if ("Y-m...
http://www.uspcat.com/forum.php?mod=viewthread&tid=5293 帖子上的日期时间控件有显示的问题,现在修改一下发出来, 该控件基于4.1版本