所有关联代码均在附件中下载
示例如下:

/**
* 日期时间控件,可单独显示日期,或日期时间。格式可自己设置。和myDate97设置一样
* @class Ext.form.DateTimeField
* @extends Ext.form.TriggerField
*/
Ext.form.DateTimeField = Ext.extend(Ext.form.TriggerField, {
/**
* @param {Array} date97配置列表
* @type
*/
dateConfig:null,
/**
* @param {Boolean} 是否显示时间,默认为不显示
*/
time:false,
triggerClass : 'x-form-date-trigger',
defaultAutoCreate : {tag : "input",type : "text",size : "10",autocomplete : "off"},
initComponent : function() {
Ext.form.DateField.superclass.initComponent.call(this);
this.initDate97js();
this.initDateConfig();
},
onTriggerClick : function(e) {// 点击查找按钮时
if (this.disabled||this.readOnly) {
return;
}
this.onFocus({});
var bodyWidth = document.body.clientWidth;
var xC = document.body.clientWidth - e.xy[0] - this.width;
var yC = document.body.clientHeight - e.xy[1] - this.height;
var x=0;
var y=0;
if (xC > 0)
x = e.xy[0];
else
x = document.body.clientWidth - this.width - 4;
if (yC > 0)
y = e.xy[1];
else
y= document.body.clientHeight - this.height - 4;
// this.dateConfig['position']={left:e.xy[0],top:e.xy[1]};
WdatePicker(this.dateConfig);
},
initDate97js:function(){
var obj=this;
if(!document.getElementById("$date97js")){
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", MCLONIS+"/js/date97/WdatePicker.js");
script.setAttribute("id","$date97js");
try
{
document.getElementsByTagName("head")[0].appendChild(script);
script.onload = script.onreadystatechange = function() {
if (script.readyState && script.readyState != 'loaded' && script.readyState != 'complete')
return;
script.onreadystatechange = script.onload = null;
WdatePicker(1);
}
}catch(e){}
}
},
initDateConfig:function()
{
if(!this.dateConfig)
this.dateConfig=new Array();
if(!this.dateConfig['el'])
this.dateConfig['el']=this.id;
if(this.time)
this.addDateConfig("dateFmt",'yyyy-MM-dd HH:mm:ss');
else
if(!this.dateConfig["dateFmt"])
this.dateConfig["dateFmt"]='yyyy-MM-dd';
if(!this.dateConfig["skin"])
this.dateConfig["skin"]='ext';
},
addDateConfig:function(name,value)
{
this.removeDateConfig(name);
this.dateConfig[name]=value;
},
removeDateConfig:function(name){
for (var i = 0; i < this.dateConfig.length; i++) {
var temp = this.dateConfig[i];
if (temp && temp.split(':')[0] == name) {
this.dateConfig.pop(i);
return;
}
}
},
setDateConfig:function(config)
{
this.dateConfig=config;
this.initDateConfig();
}
});

- 大小: 11.9 KB
分享到:
相关推荐
为了解决这个问题,我们可以利用My97DatePicker这个强大的日期时间插件进行扩展,它提供了丰富的功能,包括对时、分、秒的支持,从而满足更复杂的需求。 My97DatePicker是一款流行的JavaScript日期选择器,其设计...
在实际项目中,开发者可以根据具体需求,调整和扩展这个插件的功能,例如添加自定义的事件处理、调整图表的动画效果,或者与其他ExtJS组件进行深度集成,实现更复杂的交互和数据展示逻辑。 总的来说,Ext.ux.Google...
安装ExtJS插件通常涉及以下几个步骤: 1. **获取插件**:你可以从ExtJS官方市场、GitHub或其他第三方资源获取插件。确保插件与你正在使用的ExtJS版本兼容。 2. **下载和解压**:将下载的插件压缩包解压到你的项目...
另一个标签是“工具”,可能涉及了使用某些开发工具,如IDE插件、调试器或构建工具,来辅助类的设计和开发。 通过学习和应用上述知识点,开发者可以在ExtJs项目中创建高效、可维护的类结构,提升Web应用程序的质量...
- **常量名**:全部使用大写字母,单词之间用下划线分隔,如 `MY_CONSTANT`。 #### 四、实践 Hands-on 在实际开发过程中,除了遵循上述的环境设置、目录结构和命名规范外,还需要注意以下几点: ##### 1. 声明 ...
市场上还有一些其他 UI 插件可供选择,例如 DWZ,这是一个国产的 jQuery UI 库,以及 ExtJS,它是一个独立的 UI 插件库,具有广泛的功能和深度定制的能力。 值得注意的是,jQuery EasyUI 从 1.3.5 版本开始不再支持...
4. **节省时间和资源**:预设了大量的样式和脚本,大大减少了开发时间和所需的人力资源。 5. **简单且强大**:易于上手,同时提供了强大的功能和定制选项。 6. **支持扩展**:允许开发者根据自己的需求扩展控件或...
4. **节省时间和资源**:使用预定义的 UI 组件可以显著提高开发效率,缩短项目周期。 5. **易于扩展**:jQuery EasyUI 提供了一个开放的架构,可以根据项目需求自定义和扩展 UI 组件。 6. **版本迭代和完善**:社区...
除了 jQuery EasyUI,市场上还有其他 UI 插件可供选择,如 DWZ,这是一个国产的、同样基于 jQuery 的框架,以及独立的 ExtJS UI 插件,提供了更多高级功能和组件。 值得注意的是,jQuery EasyUI 最新版本 1.3.5 ...