calendar控件使用 extjs_extjs年月选择日历及通用js同步ajax调用返回json object
前段做报表,要按年月统计结果,之前的报表用的都是这种年月选择框:
,这在弹框里很难看,我在网上查找了很多资料,找到了别人重写的datepicker方法,开始测试没发现什么问题,后来再上线后发现只要到月底,选择偶数月份失去焦点时,输入框里的月份会自动加1,别人数这是extjs的bug,但是总不能因为是bug就不做吧,后来终于在网上查找到了插件代码,才搞定:
1:ext3版本插件
插件代码:
Ext.ux.MonthPickerPlugin = function() {
var picker=null;
var oldDateDefaults=null;
this.init = function(pk) {
picker = pk;
picker.onTriggerClick = picker.onTriggerClick.createSequence(onClick);
picker.getValue = picker.getValue.createInterceptor(setDefaultMonthDay).createSequence(restoreDefaultMonthDay);
picker.beforeBlur = picker.beforeBlur.createInterceptor(setDefaultMonthDay).createSequence(restoreDefaultMonthDay);
};
function setDefaultMonthDay() {
oldDateDefaults = Date.defaults.d;
Date.defaults.d = 1;
return true;
}
function restoreDefaultMonthDay(ret) {
Date.defaults.d = oldDateDefaults;
return ret;
}
function onClick(e, el, opt) {
var p = picker.menu.picker;
p.activeDate = p.activeDate.getFirstDateOfMonth();
if (p.value) {
p.value = p.value.getFirstDateOfMonth();
}
p.showMonthPicker();
if (!p.disabled) {
p.monthPicker.stopFx();
p.monthPicker.show();
// if you want to click,you can the dblclick event change click
p.mun(p.monthPicker, 'click', p.onMonthClick, p);
p.mun(p.monthPicker, 'click', p.onMonthDblClick, p);
p.onMonthClick = p.onMonthClick.createSequence(pickerClick);
p.onMonthDblClick = p.onMonthDblClick.createSequence(pickerDblclick);
p.mon(p.monthPicker, 'click', p.onMonthClick, p);
p.mon(p.monthPicker, 'click', p.onMonthDblClick, p);
}
}
function pickerClick(e, t) {
var el = new Ext.Element(t);
if (el.is('button.x-date-mp-cancel')) {
picker.menu.hide();
} else if(el.is('button.x-date-mp-ok')) {
var p = picker.menu.picker;
p.setValue(p.activeDate);
p.fireEvent('select', p, p.value);
}
}
function pickerDblclick(e, t) {
var el = new Ext.Element(t);
if (el.parent()
&& (el.parent().is('td.x-date-mp-month')
|| el.parent().is('td.x-date-mp-year'))) {
var p = picker.menu.picker;
p.setValue(p.activeDate);
p.fireEvent('select', p, p.value);
}
}
};
Ext.preg('f-monthPickerPlugin', Ext.ux.MonthPickerPlugin);
使用:
new Ext.form.DateField({
renderTo: document.body,
plugins:'monthPickerPlugin',
name:'month',
format: 'Y-m'
});
效果:
/**
*通用JS 同步ajax调用 返回json Object
*
* @param {}
* urlStr
* @param {}
* paramsStr 为字符串键值对形式“key=value&key2=value2”
* @return {} 返回json Object
*/
function ajaxSyncCall(urlStr, paramsStr) {
var obj='';
if (window.ActiveXObject) {
obj = new ActiveXObject('Microsoft.XMLHTTP');
} else if (window.XMLHttpRequest) {
obj = new XMLHttpRequest();
}
obj.open('POST', urlStr, false);
obj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
obj.send(paramsStr);
var result = Ext.util.JSON.decode(obj.responseText);
return result;
}
calendar控件使用 extjs_extjs年月选择日历及通用js同步ajax调用返回json object相关推荐
- calendar控件使用 extjs_ExtJs定制日历控件——自动加载更新(日历控件显示)
将定制的日历控件放到一个Panel里显示,其结构如下: , { border: true, id: 'page', animCollapse : true, width: 1050, height: ...
- ASP.NET 在vs中使用Calendar控件 制作一个日历 并标注节假日
Calendar控件 Calendar控件可以说用户方便.准确地选择日期或查看与日期相关的数据.当创建Calendar控件中的每个日期单元格均会引发DayRender事件,通过DayRender事件的 ...
- ExtJS 日历Calendar 控件 使用
ExtJS6 提供了日历控件,但是官网的demo贼坑,只讲了ajax使用,经过不懈努力地,无头苍蝇式尝试,终于摸到了使用门槛. 首先 在具体项目里,引用calendar的包. 其次 设定好calend ...
- 日历控件的android代码,Android日历控件PickTime代码实例
Android日历控件PickTime代码实例 发布时间:2020-10-03 16:05:51 来源:脚本之家 阅读:86 作者:手撕高达的村长 最近做项目,需要设置用户的生日,所以做这样一个功能. ...
- vs2010中Calendar控件的一些使用
一.返回指定日期前后的某一日期; // Sets a DateTime to April 3, 2002 of the Gregorian calendar. DateTime myDT ...
- vant 2 Calendar控件IOS下空白
今天写代码发现 vant2 Calendar控件的一个BUG. 具体体现为在IOS的真实手机上,某些机型打开后日历显示一片空白,拖动一下就又恢复了正常显示出来了. 使用了解决办法模拟滚动下.关键是时机 ...
- ASP.NET Calendar 控件
ASP.NET Calendar 控件 http://www.w3school.com.cn/aspnet/control_calendar.asp 转载于:https://www.cnblogs.c ...
- WPF- 关于自定义Calendar控件
由于项目对更改日期 时间的需要,接触了一下Calendar控件.结果发现在这么强大的控件的背后,微软其实并没有为开发人员留有很强的扩展性. (项目要求的Calendar控件能对一些特定的日期进行特殊处 ...
- 动态生成表格呈现还是将表格直接绑定gridview等控件呈现的开发方式选择依据...
动态生成表格呈现还是将表格直接绑定gridview等控件呈现的开发方式选择依据:由存储过程决定,如果编写的存储过程可以生成需要呈现的表格则直接绑定,否则要动态生成表格 转载于:https://www. ...
最新文章
- 分享丨李飞飞、吴恩达、Bengio等人的顶级深度学习课程
- GraphPad Prism 9 如何一次处理多张图表?
- LeetCode 2119. 反转两次的数字
- R循环有两个_循环子群
- 恒大汽车自救进行时:恒驰5进入试产阶段,离量产只差道路准入许可
- C语言 pthread_cancelpthread_detach
- CentOS 7 上安装 Redis3.2.3 并开启外网访问
- 14-模板方法模式Quarkus实现
- xshell 执行脚本API介绍(附带xsh的python包)
- RISCV toolchain编译工具链搭建
- C语言初阶:define定义的常量和宏,关于指针的详细讲解,初步认识结构体的使用
- 影视剪辑,如何一个人自学短视频7天vlog教程
- 南京那边可以学计算机绘画,电脑画画软件有哪些?推荐几款可以教画画的app
- 阿里云服务器建站教程(5分钟网站上线)
- js点击图片变化成另一个图片
- Machine Learning:支持向量机通俗导论(理解SVM的三层境界)
- 使用Superset创建数据分析图表
- aspcms留言增加防刷新验证,单一ip留言条数限制,防止恶意刷新及恶意提交。
- 第六章JVM虚拟机字节码执行引擎——类文件和类加载之前必看
- FFMpeg 实现视频解码、编码、转码流程详解
热门文章
- 面向项目(二)—— visual studio 的使用
- Tricks(三十六)—— remove_list_entry(无需 if 逻辑)
- STL 中的容器们 (二)
- C++基础::拾遗琐碎
- typescript 怎么表示当前时间减一个月_吃什么减肚子最快最有效 4种刮油食物吃出小蛮腰...
- 编程语言python入门-手把手教你从零开始用Python语言写爬虫程序
- python代码写好了怎么运行-教你如何编写、保存与运行 Python 程序
- python自学行吗-《》 python自学行吗?
- 语音识别系统市场前景及发展趋势
- RocketMQ 延时消息的使用和延时级别的配置