现在我们给上次做的表单加上一个datefield控件,这个控件可以支持用户选择日期
<link type="text/css" rel="stylesheet" href="/ext-2.1/resources/css/ext-all.css">
<script type="text/javascript" src="/ext-2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext-2.1/ext-all.js"></script>
<script type="text/javascript" src="/ext-2.1/source/locale/ext-lang-zh_CN.js"></script>
<script>
Ext.onReady(function(){
new Ext.Window({
modal:true,
title:'添加用户',
resizable:false,
width:500,
layout:'form',
bodyStyle: 'padding:5px 5px 0',
labelWidth:60,
height:240,
plain:true,
buttonAlign:'center',
items:[{
baseCls:'x-plain',
layout:'column',
items:[{
labelWidth:60,
layout:'form',
baseCls:'x-plain',
columnWidth:.5,
defaultType:'textfield',
items:[{
fieldLabel:"姓名"
},{
fieldLabel:"性别"
},{
xtype:"datefield",
format:"Y-m-d",
readOnly:true,
fieldLabel:"出生日期"
},{
fieldLabel:"地址"
}]
},{
baseCls:'x-plain',
labelWidth:60,
layout:'form',
columnWidth:.5,
defaultType:'textfield',
items:[{
fieldLabel:"照片",
inputType :"image",
width:120,
height:100
}]
}]
},{
xtype:'textfield',
fieldLabel:"详细地址",
width:410
},{
xtype:'textfield',
fieldLabel:"关系",
width:410
}],
buttons:[{text:"确定"},{text:"取消"}],
listeners:{
"show":function(_window)
{
_window.findByType('textfield')[4].getEl().dom.scr="a.gif";
}
}
}).show();
});
</script>
datefield控件有一些属性
formate:指定客户选择完控件后在文本框中显示的格式。常用格式Y-m-d
readOnly:文本框只读属性
最后有一点也是一上来困要我的就是默认datefield控件的月份选择是英文,需要在页面上引入相应的语言脚本。
<script type="text/javascript" src="/ext-2.1/source/locale/ext-lang-zh_CN.js"></script>
source/locale/ext-lang-zh_CN.js是专用于中文的脚本。
- 大小: 16.8 KB
分享到:
相关推荐
总的来说,`Ext`框架中的`dateField`扩展为开发者提供了强大的工具,使他们能够创建适应各种场景的时间选择控件,不仅满足基本的日期输入需求,还能提供更加精细化和定制化的用户体验。通过深入学习和理解`...
"Ext DateField控件 - 只选择年月"这个主题聚焦于一个特定的UI组件,用于帮助用户仅选择日期中的年份和月份部分,而忽略具体的日期。这在处理诸如生日、合同有效期等只需要年月信息的场景时非常有用。 Ext JS是一个...
在使用这个插件时,首先需要引入相关的CSS和JavaScript文件,这些文件通常位于压缩包中的"Ext DateField控件 - 年月选择插件"目录下。接着,你需要在DateField配置中启用插件,指定显示的格式,如'Y-m',这将确保...
2. **实现原理**:介绍如何利用Ext JS的组件模型和事件机制,修改dateField的默认行为,添加新的选择模式和清空按钮。 3. **代码示例**:展示关键的JavaScript代码片段,包括自定义扩展的定义、配置项的设置以及如何...
通过这样的扩展,EXT DateField从原本只能选择日期,进化为能同时选择日期和时间,大大提升了EXT在处理时间数据方面的功能。开发者可以根据项目需求,灵活选择和定制这些用户扩展控件,以满足各种复杂场景下的交互...
1.此控件支持Ext3.2及以上版本 2.用法与Ext.form.DateField一样,xtype:'datetimefield' 3.不需要导入css或其他js 4.解决某些插件导入会显示对象未定义问题
DateField是Ext.form.field.Date的实例,它继承自Ext.form.field.Text。DateField提供了一个日期选择器,允许用户通过日历图标选择日期,或者直接在文本框中输入日期。默认情况下,它会按照指定的格式显示和验证日期...
在Ext JS这个强大的JavaScript框架中,开发者经常使用各种组件来构建富客户端应用,其中包括TextField(文本字段)和DatePicker(日期选择器)。有时,我们可能需要根据应用需求在运行时禁用这些组件的编辑功能,...
对于DateTimeField,我们可能需要继承Ext.form.field.DateField,并添加新的配置项和方法来处理时间选择。 2. **时间选择组件**:创建一个新的时间选择组件,比如一个包含小时、分钟和秒的下拉列表,或者使用滑动条...
考虑到extjs DateField的关键配置和主要操作
在本篇文章中,我们将深入探讨一个具体的技术问题:在ExtJS框架中,Google浏览器与DateField控件的不兼容性问题。这个问题对于那些正在使用ExtJS进行Web应用程序开发的开发者来说,是一个非常实用且需要解决的技术...
为了解决这个问题,开发者可以创建一个自定义的EXT JS组件,通过组合EXT JS的基础控件,如TimeField和DateField,或者直接修改EXT JS源码,增加对时分秒选择的支持。 这个自定义组件可能会包含以下关键特性: 1. **...
在Flex编程中,DateField是Adobe Flex SDK提供的一种用于显示和编辑日期的UI组件。然而,标准的DateField控件可能无法满足所有开发者对于日期选择和显示的特定需求。因此,自定义DateField控件的创建变得尤为重要。...
extjs4.2 日期控件 datefield 拓展加上选择时分秒功能。 在ExtJs4.2表单控件里分别有个时间控件(datafield)和时间控件(timefield),但是官方提供的控件不能将日期和时分秒整合到一起,我从网上搜集整理了一个可用...
3. 使用mx.utils.DateUtil或自定义逻辑处理日期时间的格式化和解析,确保符合预期的日期时间格式。 4. 添加事件监听器,以便在用户选择新的日期和时间后更新组件的值,并确保正确反映在界面上。 5. 对于本地化,可能...
在Flex开发中,DateField控件是用于显示和编辑日期的一种常见组件,它允许用户通过交互界面选择日期。然而,标准的Flex DateField通常只支持日期的选择,而不包括时间的选取。但在某些应用场景中,例如日程安排或...
在EXTJS中,`Ext.DateField` 是一个常用的组件,用于处理日期输入。然而,原生的`Ext.DateField` 只允许用户选择年、月、日,不包含时间选择功能。为了解决这个问题,EXTJS 社区开发了扩展功能,使得用户可以同时...
5. **本地化支持**:由于题目提到默认中文显示,我们需要处理日期和时间的本地化。Flex支持多种语言,可以通过`locale`属性设置。对于中文,可以设置为"zh_CN"。同时,确保时间格式符符合中文的日期和时间习惯。 6....
EXT日期格式是一种在编程和数据处理中常用的日期和时间表示方式。它允许开发者精确地定义日期和时间的显示格式,从而提高代码的可读性和一致性。EXT日期格式使用各种字符来代表日期和时间的不同部分,以下是一些主要...
可以通过如下代码新建一个日期选择框: 代码如下: new Ext.form.DateField({ id: ‘diliveryDate’, format: ‘Y年m月d日’, maxValue: new Date(), minValue: ‘1900-01-01’, disabledDays: [0, 6], ...