`
wang19841229
  • 浏览: 96663 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

EXT学习笔记06datefield和本地化datefield

    博客分类:
  • ajax
阅读更多

现在我们给上次做的表单加上一个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`扩展为开发者提供了强大的工具,使他们能够创建适应各种场景的时间选择控件,不仅满足基本的日期输入需求,还能提供更加精细化和定制化的用户体验。通过深入学习和理解`...

    Ext DateField控件 - 只选择年月

    "Ext DateField控件 - 只选择年月"这个主题聚焦于一个特定的UI组件,用于帮助用户仅选择日期中的年份和月份部分,而忽略具体的日期。这在处理诸如生日、合同有效期等只需要年月信息的场景时非常有用。 Ext JS是一个...

    Ext DateField控件 - 只选择年月插件

    在使用这个插件时,首先需要引入相关的CSS和JavaScript文件,这些文件通常位于压缩包中的"Ext DateField控件 - 年月选择插件"目录下。接着,你需要在DateField配置中启用插件,指定显示的格式,如'Y-m',这将确保...

    Ext dateField扩展 可单独选择年月,年,月.可清空

    2. **实现原理**:介绍如何利用Ext JS的组件模型和事件机制,修改dateField的默认行为,添加新的选择模式和清空按钮。 3. **代码示例**:展示关键的JavaScript代码片段,包括自定义扩展的定义、配置项的设置以及如何...

    Ext用户扩展控件---------日期时间选择器,可以精确到某天的某分钟

    通过这样的扩展,EXT DateField从原本只能选择日期,进化为能同时选择日期和时间,大大提升了EXT在处理时间数据方面的功能。开发者可以根据项目需求,灵活选择和定制这些用户扩展控件,以满足各种复杂场景下的交互...

    Ext-datatimefield日期与时间选择器精确至时分秒

    1.此控件支持Ext3.2及以上版本 2.用法与Ext.form.DateField一样,xtype:'datetimefield' 3.不需要导入css或其他js 4.解决某些插件导入会显示对象未定义问题

    ExtJs 带清空功能的日期组件

    DateField是Ext.form.field.Date的实例,它继承自Ext.form.field.Text。DateField提供了一个日期选择器,允许用户通过日历图标选择日期,或者直接在文本框中输入日期。默认情况下,它会按照指定的格式显示和验证日期...

    Ext Extjs 禁止文本和日期编辑

    在Ext JS这个强大的JavaScript框架中,开发者经常使用各种组件来构建富客户端应用,其中包括TextField(文本字段)和DatePicker(日期选择器)。有时,我们可能需要根据应用需求在运行时禁用这些组件的编辑功能,...

    ext日期控件时分秒

    对于DateTimeField,我们可能需要继承Ext.form.field.DateField,并添加新的配置项和方法来处理时间选择。 2. **时间选择组件**:创建一个新的时间选择组件,比如一个包含小时、分钟和秒的下拉列表,或者使用滑动条...

    extjs DateField完全操作

    考虑到extjs DateField的关键配置和主要操作

    extjs中 google 不兼容 datefield 控件

    在本篇文章中,我们将深入探讨一个具体的技术问题:在ExtJS框架中,Google浏览器与DateField控件的不兼容性问题。这个问题对于那些正在使用ExtJS进行Web应用程序开发的开发者来说,是一个非常实用且需要解决的技术...

    ext 时间控件带有时分秒的控件

    为了解决这个问题,开发者可以创建一个自定义的EXT JS组件,通过组合EXT JS的基础控件,如TimeField和DateField,或者直接修改EXT JS源码,增加对时分秒选择的支持。 这个自定义组件可能会包含以下关键特性: 1. **...

    自定义DateField

    在Flex编程中,DateField是Adobe Flex SDK提供的一种用于显示和编辑日期的UI组件。然而,标准的DateField控件可能无法满足所有开发者对于日期选择和显示的特定需求。因此,自定义DateField控件的创建变得尤为重要。...

    extjs4.2 日期控件 datefield 拓展加上选择时分秒功能

    extjs4.2 日期控件 datefield 拓展加上选择时分秒功能。 在ExtJs4.2表单控件里分别有个时间控件(datafield)和时间控件(timefield),但是官方提供的控件不能将日期和时分秒整合到一起,我从网上搜集整理了一个可用...

    Flex自定义DateField选择时分秒 修复版

    3. 使用mx.utils.DateUtil或自定义逻辑处理日期时间的格式化和解析,确保符合预期的日期时间格式。 4. 添加事件监听器,以便在用户选择新的日期和时间后更新组件的值,并确保正确反映在界面上。 5. 对于本地化,可能...

    flex DateField 时分秒 选择

    在Flex开发中,DateField控件是用于显示和编辑日期的一种常见组件,它允许用户通过交互界面选择日期。然而,标准的Flex DateField通常只支持日期的选择,而不包括时间的选取。但在某些应用场景中,例如日程安排或...

    ext 可以选择小时分钟秒

    在EXTJS中,`Ext.DateField` 是一个常用的组件,用于处理日期输入。然而,原生的`Ext.DateField` 只允许用户选择年、月、日,不包含时间选择功能。为了解决这个问题,EXTJS 社区开发了扩展功能,使得用户可以同时...

    Flex自定义DateField选择时分秒

    5. **本地化支持**:由于题目提到默认中文显示,我们需要处理日期和时间的本地化。Flex支持多种语言,可以通过`locale`属性设置。对于中文,可以设置为"zh_CN"。同时,确保时间格式符符合中文的日期和时间习惯。 6....

    EXT日期格式说明

    EXT日期格式是一种在编程和数据处理中常用的日期和时间表示方式。它允许开发者精确地定义日期和时间的显示格式,从而提高代码的可读性和一致性。EXT日期格式使用各种字符来代表日期和时间的不同部分,以下是一些主要...

    Extjs学习笔记之三 extjs form更多的表单项

    可以通过如下代码新建一个日期选择框: 代码如下: new Ext.form.DateField({ id: ‘diliveryDate’, format: ‘Y年m月d日’, maxValue: new Date(), minValue: ‘1900-01-01’, disabledDays: [0, 6], ...

Global site tag (gtag.js) - Google Analytics