本帖最后由 ~~疯狂~~ 于 2012-6-15 00:17 编辑
建议管理员做发一两个extaspnet简单控件开发的教程,这样大家学会了以后控件就更多了。
自己不懂extaspnet的控件开发,请高手帮忙做个带时间的日期控件。具体的js别人已经实现,需要再处理一下:
用My97扩展成的ExtJs日期时间插件
所有关联代码均在附件中下载 示例如下:
- /**
- * 日期时间控件,可单独显示日期,或日期时间。格式可自己设置。和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();
- }
- });
复制代码
ExtJS之时间控件
可能很多朋友都会觉得ExtJS自己的日期控件不是很好用,比如要选择精确时间“2009-09-03 10:28:54”就显得无能为力了,网上有些高手扩展了这些控件,但个人感觉不是很好用,且目前没有发现可以用于EXT 3.0版本的。
现给大家推荐EXtJS结合my97 的时间控件一起使用。首先下载MY97:http://www.my97.net/dp/index.asp
接着引入到你使用的页面<script src="My97DatePicker/WdatePicker.js" type="text/javascript"></script>
最后定义你的表单:items:[ {
fieldLabel: '开始时间',
listeners: {
'focus': function(){WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})}
}]
OK,可以使用了。
my97时间控件官网,有免费版的。
http://www.my97.net/dp/index.asp
|