- 浏览: 235725 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
月度银墙:
wangxiang243 写道不错 !但是ext4中六月和十二 ...
ext2,3,和4 版本 只显示年月的日期插件 -
38123978:
你好,我最近在看cassandra的性能,我想问一下5000万 ...
Cassandra学习笔记3 -
zhaojinmeng:
您好楼主,extjs5要怎么扩展啊?求指导
ext2,3,和4 版本 只显示年月的日期插件 -
love_wting:
为什么下拉框的表格样式显示了,数据访问json也从数据库中取到 ...
Extjs 下拉grid -
laungcisin:
yangxiutian 写道另外Ext4.2.1还故意把x-m ...
ext2,3,和4 版本 只显示年月的日期插件
ext2 日期范围控件(2个控件)
- 博客分类:
- Ext
控件1 介绍:
首先加入
Ext.apply(Ext.form.VTypes, { dateRangeGroup : function(val, field) { var date = field.parseDate(val); if(!date){ return false; } if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) { var start = field.ownerCt.ownerCt.ownerCt.items.item(0); // var start = Ext.getCmp(field.startDateField); start.setMaxValue(date); this.dateRangeMax = date; start.validate(); } else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) { var end = field.ownerCt.ownerCt.ownerCt.items.item(1); // var end = Ext.getCmp(field.endDateField); end.setMinValue(date); this.dateRangeMin = date; end.validate(); } return true; } });
插件代码:
Ext.form.DateRangeGroup = Ext.extend(Ext.form.CheckboxGroup, { /** * @cfg {Boolean} allowBlank True to allow every item in the group to be blank (defaults to false). If allowBlank = * false and no items are selected at validation time, {@link @blankText} will be used as the error text. */ allowBlank: false, /** * @cfg {String} blankText Error text to display if the {@link #allowBlank} validation fails (defaults to "You must * select one item in this group") */ blankText: "You must select all items in this group", // private defaultType: 'radio', height:20, // private groupCls: 'x-form-radio-group', // private columns: [.46, .07, .46], /** * @cfg {String} token The string used to join and separate the values of the individual fields * (defaults to ','). */ token: '|', // private israwvalue: true, // private validateText: "The first item's value must less-than/equal the second item's value", // private validateValue: function(value) { if (!this.allowBlank) { var blank = false; this.items.each(function(f) { if (!f.getValue()) { blank = true; } }, this); if (blank) { this.markInvalid(this.blankText); return false; } var v1 = this.items.items[0].getValue(); var v2 = this.items.items[1].getValue(); if (v1 > v2) { this.markInvalid(this.validateText); return false; } } return true; }, // private initValue: function() { if (this.value !== undefined) { this.setValue(this.value); } }, /** * Returns the raw data value which may or may not be a valid, defined value. To return a normalized value see {@link #getValue}. * @return {Mixed} value The field value */ getRawValue: function() { var v = ''; if (this.rendered) { this.items.each(function(f) { if (f.isFormField) { //if(v.length)v+=this.token; if (this.israwvalue) { v += f.getRawValue(); } else { v += f.getValue(); } v += this.token; } }, this); } else Ext.value(this.value, ''); if (v === this.emptyText) { v = ''; } else { v = v.slice(0, -1); } return v; }, /** * Returns the normalized data value (undefined or emptyText will be returned as ''). To return the raw value see {@link #getRawValue}. * @return {Mixed} value The field value */ getValue: function() { var v = this.getRawValue(); return v; }, /** * Sets the underlying DOM field's value directly, bypassing validation. To set the value with validation see {@link #setValue}. * @param {Mixed} value The value to set * @return {Mixed} value The field value that is set */ setRawValue: function(v) { var val = ''; var i = 0; if (v.length) var vs = v.split(this.token); else { var vs = []; for (i = 0; i < this.items.length; i++) { vs[i] = ''; } } i = 0; this.items.each(function(f) { if (i >= vs.length) return false; if (f.isFormField) { if (this.israwvalue) { f.setRawValue(vs[i]); } else { f.setValue(vs[i]); } if (val.length) val += this.token; val += vs[i++]; } return true; }, this); }, /** * Sets a data value into the field and validates it. To set the value directly without validation see {@link #setRawValue}. * @param {Mixed} value The value to set */ setValue: function(v) { this.value = v; if (this.rendered) { this.value = this.setRawValue(v); this.validate(); } }, items: [ { name: 'dtrg-auto1', xtype: 'datefield',readOnly: true,vtype:"dateRangeGroup", endDateField: 'dtrg-auto-2'}, { name: 'dtrg-auto-sep', xtype: 'label', html: '<div align=left style="padding-top:4px"><b>至</b></div>' }, { name: 'dtrg-auto-2', xtype: 'datefield',startDateField:"dtrg-auto1",vtype:"dateRangeGroup", readOnly: true} ] }); Ext.reg('daterangegroup', Ext.form.DateRangeGroup);
使用例子
{ xtype : "daterangegroup", fieldLabel : "日期范围", width:250 }
注 2.0版本无效 因为2.0无CheckboxGroup控件
控件2 介绍
第2个日期范围插件来自 http://www.sencha.com/forum/showthread.php?90111-Ext.ux.form.DateRange 此插件是基于ext3版本的 我做了少许修改 因为我用的版本是2.0.2
首先上显示效果图
此例以及修改后插件代码见附件
注 此例本人使用ext版本2.0.2 在ie7,搜狗,火狐浏览器下测试没问题 在chrome浏览器下显示会有些问题
还有的问题是 开始和结束日期的验证没有做好
另附extjs技术交流群:164648099
发表评论
-
js原型分析研究
2012-07-23 22:44 1432原型是个很微妙的东西,很多人不是很理解,理解了原型对于 ... -
Ext4.1.0 API中文版V0.4 Beta(持续更新)
2012-07-17 18:40 1075Ext4.1.0 API中文版V0.4 Beta html ... -
记录回答别人的Ext4问题
2012-07-10 13:23 26371:Ext4版本 双击Tab页面页签关闭 来自问题:ht ... -
Extjs4 时分秒日期插件
2012-05-11 13:05 12339插件1: 初始界面 弹出界面 插件代码 见附件 ... -
Ext3 日期范围插件
2012-04-03 17:32 2115先上 效果图有图有真相嘛 使用例子: ... -
Extjs2分页树 带查询功能
2012-03-29 11:37 4168先上效果图: 插件代码见附件 使 ... -
ext2 grid 封装 (包含增删改查 导入导出等操作)
2012-02-27 14:32 5005最近项目又用到ext 比较 ... -
tree拖拽
2011-09-04 22:09 2423当时遇到如下问题: 拖拽A tree 的a节点到B tree ... -
ExtJS Web应用程序开发指南(第2版)(针对Ext JS 4.0更新)源代码
2011-08-11 14:56 1102ExtJS Web应用程序开发指南(第2版)(针对Ext JS ... -
通过拖拽Grid改变行的顺序
2010-10-08 13:06 3758<script> var meta ... -
使用注解和反射构造ext的grid需要的列模型
2010-09-18 12:03 1668注解类: package xzd; import ... -
ExtJs Grid分页时序号自增的实现
2010-08-23 16:28 3045首先看到网上都是类似 http://www.blogjava. ... -
extjs 自己的小小总结
2010-08-13 21:15 3288总结自己的代码 可能以后会用到 记录一下 方便以后查阅 1 ... -
eclipse 中怎样来集成 JBOSS
2010-08-09 08:46 0eclipse 中怎样来集成 JBOSS -
ext2,3,和4 版本 只显示年月的日期插件
2010-08-03 20:23 15679Ext技术交流群:164648099 1:ext3版本 ... -
关于Extjs3.0中的TreeGrid (Ext.ux.maximgb.tg.EditorGridPanel)(转)
2010-08-01 21:38 4341转:(http://www.liyonghome.cn/ind ... -
ext grid 单元格提示 出现图片
2010-07-31 00:03 2646代码简单 只是记录一下 <html> ... -
ext tree相关知识
2010-07-30 23:53 2602ext tree 动态修改各个节点名称icon小图标 &qu ... -
ext 后台查数据库数据拼装tree数据
2010-07-26 22:21 2472来自:Extjs交流群(164648099) 说明: ... -
ext grid刷新后 滚动条位置不变
2010-07-19 21:11 2987Ext.override(Ext.grid.GridView, ...
相关推荐
EXT日期加时间控件 EXT日期加时间控件
该ext时间控件在日期下面可调节小时,分钟.........欢迎下载...............
Ext日期时间控件 Spiiner控件及其它Ext代码
ext 4.0 日期选择控件 时分秒 中文版
ext,下拉日期,时间,控件,日期时间精确到秒 很好用的一个控件.不错不错. 下了绝对不后悔,觉得好的话,请给一个好评.
自己第一次用Ext做的时间段选择控件,是参考公司了另一同事的控件修改的希望对大家有用。
/** * 此组件为带时分秒的日期控件,在原DateTimeField修改 * 此功能较以前版本增加功能 * 1,在GRID中使用时,增加单元格处于编辑状态时的初始化此控件值 * 2,增加操作日选择器时初始化时分秒功能 * 3,增加点击...
ext日期时间控件精确到时分秒,欢迎下载...................
ext4.2 日历日期控件,可以选择时分秒
到也没什么特殊的 相反还有点丑 唯一的好处就是Extjs 5 0+也可以用 好吧 其实应该只有5 0以上才可以用 5的这个datepicker变了 so
extjs4 日期时间控件 包括的样式有 年月的选择 年月日的选择 年月日时间的选择
扩展Ext日期控件,使其显示农历、让星期六、星期天高亮显示。 先有两种实现方式,一为重写Date.DatePicker和Ext.form.DateField控件的相应方法、另一种为单独做一个扩展扩建。 本JS文件在Ext3.1测试通过、若果要在...
Ext扩展dateField时间控件,可以选择年月日、年月、年、月
这个压缩包是本人从Ext官方论坛收集的用户扩展控件,针对EXT版本2.x,里面有树表格,图表控件,上传控件,表格过滤控件,通知窗口控件等等。 大部分解压后放入ext的example文件夹下就可以运行,有少数几个需要部署到...
Ext表格控件和树控件,请关注后续发布,不断更新中
ext基本的控件例子ext基本的控件例子ext基本的控件例子ext基本的控件例子ext基本的控件例子
Ext的gridpanel控件二次加载时丢失解决方案
ext3.0+highcharts+ext时间日期控件+jquery+json
Ext控件详细资料,使用所有it人事学习。容易掌握。
EXT 时间控件 EXT 时间控件EXT 时间控件