日期控件
在上一篇笔记中的基础上,为Birth加上日期控件:
items:[
{fieldLabel:"Name"},
{fieldLabel:"Gender"},
{fieldLabel:"Age"},
{
xtype:"datefield",
fieldLabel:"Birth"
},
{fieldLabel:"Phone"},
{fieldLabel:"Email"}
]
效果
可以看到简单的指定item的xtype属性为 datefield 就可以实现日期控件了
但是这里出现了一个问题,生成日期控件之后Photo中的照片不见了,回头想想我们在取照片的时候是采用
_window.findByType("textfield")[6].getEl().dom.src = "../../../image/default_pic.gif";
findByType()方法来取Ext的Element对象的,在这里把原来Birth的TextField转换成了DateField,TextField的个数就少了一个,所以之前的索引位置是第 7
个
,现在要改为第 6
个就正确了(看来使用这种方法还是有一定缺陷的,一旦其他部分的Component发生改变,这里还要跟着变,最好还是使用直接引用唯一的一个ID的方式是最准确和方便的,不用去数它究竟Index哪个位置)。
修改日期的格式
日期控件产生的日期格式是根据Local来定义的,通过引用 Locale 文件 可以确定默认的Locale定义的格式,也可以通过其他的属性来进行自定义格式。
引用Locale文件
<script type="text/javascript" src="../../../ext/build/locale/ext-lang-zh_CN.js"></script>
引用中文的国际化语言包得到的结果
如果没有没有指定Locale文件,则默认使用英文的Locale文件。
自定义格式:
在API中查找DateField,可以找到定义日期格式可以通过format构造参数来实现,在Dojo的日期控件中也同样是有format属性的,这一点看起来很类似。
通过API可以看到日期的格式化是通过Date.parseDate来实现的,再看一下Date类中parseDate()方法的实现:
API中写的非常清楚,连例子都给出来了,就不多啰嗦了。来试验一下,使用"Y-m-d"模式来格式化日期:
{
xtype:"datefield",
format:"Y-m-d",
fieldLabel:"Birth"
},
效果如下
更多的匹配符在Date类中有定义,需要用的时候再去查就好了
在某些情况下需要对日期设置一个初始值,比如员工的生日,这个可以通过构造参数 value 来设置:
{
xtype:"datefield",
format:"Y-m-d",
value:"1984-12-03",
fieldLabel:"Birth"
},
如果默认日期要设置成为当天的日期,设置构造参数。
如果value的值输入字符或字符和数字的组合,如“adaffdasdf”或“adf1984”,DateField控件中都会显示空白。
如果value的值输入不符合格式的数字,如format为"Y-m-d",但是value值为“1984”,则DateField控件会给出“2010-09-22”这样不知所谓的结果。应当确保value和format一致。
如果要避免类似的情况:
用户输入错误的字符,导致提交到后台的数据不正确,可以禁止用户输入,设置readOnly为true
{
xtype:"datefield",
format:"Y-m-d",
value:"1984-12-03",
readOnly:true,
fieldLabel:"Birth"
},
这样就只能选择而不能手动填写了,当然也可以进行验证来提示用户输入不正确,因为有些用户还是习惯手动输入,这样速度会比较快,验证这点后面再说。
通常情况下,如果知道了出生日期,就可以通过出生日期来计算出年龄,思路是这样:在页面初始化的时候先给年龄一个默认值(和设置的出生日期相匹配),然后在用户选择了出生日期之后再进行计算来得到年龄,为年龄的TextField赋值。这样自然要为DateField添加一个事件,第一反映就是想到了DateField有没有像 onChange 或者 onblur 这样的事件呢?还是来看一下API是如何定义DateField的吧:
API中定义了一组Public Event,其中有blur这样的一个Event,
blur响应了DateField失去焦点时的事件,可以将修改年龄的动作注册到这个事件中,
{
fieldLabel:"Age",
value:"25"
},
{
xtype:"datefield",
format:"Y-m-d",
value:"1984-12-03",
readOnly:true,
fieldLabel:"Birth",
listeners:{
"blur":function(_df){
var _age = _df.ownerCt.findByType("textfield")[2];
_age.setValue(new Date().getFullYear() - _df.getValue().getFullYear());
}
}
},
这样就可以实现了,然后将年龄设置成为readOnly。
_df 是怎么来的? 看一下上面的API就明白了,传进来的参数是 this ,就是当前的DateField本身。
alert了一下_df的ID,得到的是ext-comp-1007,是因为我们自己在设计Component的时候没有为它们的ID赋值,Ext会自己自动给Components加上ID。
我试了 blur 和 change 两个事件,change表现的行为和blur是一样的,而不是像 普通的onChange或者onblur一样,看来 Ext 对事件的封装还需要进一步的了解。
日期控件将在以后不断补充遇到的问题。
这部分的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DateField in Window</title>
<link type="text/css" rel="stylesheet" href="../../../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../../../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../../ext/ext-all.js"></script>
<script type="text/javascript" src="../../../ext/build/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var _window=new Ext.Window({
title:"New Person",
width:500,
height:320,
plain:true,
layout:"form",
defaultType:"textfield",
labelWidth:45,
bodyStyle:"padding-top: 10px; padding-left:10px;",
items:[{
xtype:"panel",
baseCls:"x-plain",
layout:"column",
items:[{
columnWidth:.5,
layout:"form",
defaults:{xtype:"textfield", width:170},
labelWidth:45,
baseCls:"x-plain",
/*bodyStyle:"padding-top: 10px; padding-left:10px;",*/
items:[
{fieldLabel:"Name"},
{fieldLabel:"Gender"},
{
fieldLabel:"Age",
value:"25",
readOnly:true
},
{
xtype:"datefield",
format:"Y-m-d",
value:"1984-12-03",
readOnly:true,
fieldLabel:"Birth",
listeners:{
"blur":function(_df){
var _age = _df.ownerCt.findByType("textfield")[2];
_age.setValue(new Date().getFullYear() - _df.getValue().getFullYear());
}
}
},
{fieldLabel:"Phone"},
{fieldLabel:"Email"}
]
},
{
columnWidth:.5,
layout:"form",
style:"padding:10px 10px 0 10px",
labelWidth:45,
baseCls:"x-plain",
items:[
{
xtype:"textfield",
inputType:"image",
width:150,
height:140,
fieldLabel:"Photo"
}
]
}
]
},{
fieldLabel:"ID",
width:"400"
},{
fieldLabel:"Address",
width:"400"
},{
fieldLabel:"Depart",
width:"400"
}],
showLock:false,
listeners:{
"show":function(_window){
if(!_window["showLock"]){
_window.findByType("textfield")[5].getEl().dom.src = "../../../image/default_pic.gif";
_window["showLock"]=true;
}
}
},
buttons:[
{
text:"OK",
handler:function(){
alert(this.ownerCt.buttons[1].text);
}
},
{text:"Cancel"}
]
});
_window.show();
});
</script>
</head>
<body>
</body>
</html>
Ext学习笔记01 - NameSpace,类实例属性,类实例方法,类静态方法
Ext学习笔记02 - 构造方法,类继承,类实例方法重写
Ext学习笔记03 - 事件
Ext学习笔记04 - UI组件 - Component, Button
Ext学习笔记05 - UI组件 - Panel,TextField
Ext学习笔记06 - Window
Ext学习笔记07 - Window及Window中的布局
Ext学习笔记08 - 日期控件
Ext学习笔记09 - ComboBox
- 大小: 19.9 KB
- 大小: 10.8 KB
- 大小: 6.1 KB
- 大小: 35.4 KB
- 大小: 10.3 KB
- 大小: 43.1 KB
- 大小: 11.3 KB
- 大小: 1.2 KB
- 大小: 15 KB
- 大小: 5 KB
- 大小: 11.2 KB
分享到:
相关推荐
GWT-Ext 是基于 Google Web Toolkit(GWT)和 ExtJs 的功能强大的网页开发控件库。它非常适用于进行纯 Java 语言的富 Internet 应用的快速开发。本系列文章将详细讲解 GWT-Ext 的基本结构和功能特点,并通过代码示例...
解决Ext遇到的基础问题,如组件的应用,Ext的布局,表单,Grid控件的讲解,还要一些综合应用
Ext.Net学习笔记 ,主要用的控件的一些属性用法及意思。
Ext的学习笔记:关于Store,GridPanel及其属性的用法,希望能帮助大家
Ext2.0对框架进行了非常大的重构,其中最重要的是形成了一个结构及层次分明的组件体系,由这些组件形成了Ext控件。Ext组件由Component类定义,每一种组件都有一个指定的xtype属性值,通过该值可以得到一个组件的...
使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础,很多控件都是在面板的基础上扩展的,或者他会与其他控件之间有关系。 面板由一个工具栏、一个底部工具栏、面板头部、面板...
因为我学这个是这样一个过程,通过一个控件了解其他的控件,剩下的就是属性查API了。API我自己在翻译CHM版的。因为是个人操作。所以时间有限。。大家见谅。 在Ext下。首先接触的一定是Grid。我也是如此。我是因为 ...
Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一定的界面显示控制能力,它其中包含着一个BasicForm对象,用来执行向服务器提交,加载等动作。...
因此,现在几乎所有的grid控件都会支持分页功能。extjs也不例外,它对分页也提供了强大而方便的支持,使得我们在分页处理上可以得心应手。 在extjs中,类Ext.PagingToolbar封装了关于分页的操作,该类从Toolbar继承...
-(4) JavaScript面向对象的支持--(5) JavaScript面向对象的支持--(6) JavaScript精简学习1:基础知识 JavaScript精简学习2:浏览器输出 JavaScript精简学习3:图像 JavaScript精简学习4:表单 ...
ext学习笔记一 小试iBatis RIA(Rich Internet Application)的现状和未来 Java应用中域名解析不过期的解决方法 Java编程那些事儿45—数组使用示例1 一步步熟悉OFBiz 用Java做客户端调用.NET写...