tesia
- 浏览: 33548 次
- 性别:
- 来自: 广州
-
最新评论
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>日期控件</title>
<link rel="stylesheet" href="ext-4.2.1.883/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.2.1.883/bootstrap.js" ></script>
<script type="text/javascript" src="ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create('Ext.form.Panel',{
title:'Ext.form.field.Date示例',
frame:true,
height:100,
width:300,
renderTo:Ext.getBody(),
bodyPadding:5,
items:[{
fieldLabel:'日期选择框',
xtype:'datefield',
labelSeparator:':', //操作符
msgTarget:'side', //鼠标放上去在字段的右边显示错误信息
autoFitErrors:false, //展示错误信息时是否自动调整字段组件宽度
format:'Y年m月d日',
maxValue:'07/31/2013',//允许选择最大日期
minValue:'06/31/2012',//允许选择最小日期
disabledDates:['2008年3月20日'],
disabledDatesText:'禁止选择该日期',
width:240,
value:'06/25/2013',
showToday:false //如果为false 显示效果图如2
}]
});
});
</script>
</head>
<body>
</body>
</html>
---------------------------------------------
注：
showToday:true 设置是否显示‘今天’ 选择按钮，默认为true (所以一般不用写出来)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>日期控件</title>
<link rel="stylesheet" href="ext-4.2.1.883/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.2.1.883/bootstrap.js" ></script>
<script type="text/javascript" src="ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create('Ext.form.Panel',{
title:'Ext.form.field.Date示例',
frame:true,
height:100,
width:300,
renderTo:Ext.getBody(),
bodyPadding:5,
items:[{
fieldLabel:'日期选择框',
xtype:'datefield',
labelSeparator:':', //操作符
msgTarget:'side', //鼠标放上去在字段的右边显示错误信息
autoFitErrors:false, //展示错误信息时是否自动调整字段组件宽度
format:'Y年m月d日',
maxValue:'07/31/2013',//允许选择最大日期
minValue:'06/31/2012',//允许选择最小日期
disabledDates:['2008年3月20日'],
disabledDatesText:'禁止选择该日期',
width:240,
value:'06/25/2013',
showToday:false //如果为false 显示效果图如2
}]
});
});
</script>
</head>
<body>
</body>
</html>
---------------------------------------------
注：
showToday:true 设置是否显示‘今天’ 选择按钮，默认为true (所以一般不用写出来)
分享到：
发表评论
-
Ext.data.TreeStore 分级异步加载树节点示例
2013-07-10 15:36 2076Ext.data.TreeStore远程加载树节点有两种常用方 ... -
Ext.Ajax.request提交JSON数据
2013-07-10 09:29 1374JSON作为轻量级的数据传输格式，在很多时候可以作为XML文件 ... -
Ext.Ajax.request提交XML数据示例
2013-07-09 16:51 953服务器端：loginServerXml.jsp 在lib下要有 ... -
Ext.Ajax.request异步提交表单示例
2013-07-09 16:10 1050服务器端代码：loginServer.jsp <%@ ... -
树形面板Ext.tree.Panel
2013-07-05 15:19 653<!DOCTYPE html PUBLIC " ... -
relayEvents传播分发事件
2013-07-04 14:17 699<!DOCTYPE html PUBLIC " ... -
Extjs自定义事件
2013-07-04 10:54 440<!DOCTYPE html PUBLIC " ... -
改变文档样式风格示例
2013-07-04 10:55 778<!DOCTYPE html PUBLIC " ... -
ExtJS事件绑定方式示例
2013-07-04 10:55 678<!DOCTYPE html PUBLIC " ... -
Ext.util.JSON编码和解码JSON对象
2013-07-03 15:27 947<script type="text/java ... -
Ext.util.Format提供的常用格式化方法
2013-07-03 14:57 1340<!DOCTYPE html PUBLIC " ... -
Ext.util.ClickRepeater 事件的配置和触发
2013-07-03 11:55 750Ext.util.ClickRepeater 继承Ext.ut ... -
样式表的创建和规则获取示例
2013-07-03 10:44 519<!DOCTYPE html PUBLIC " ... -
Ext.KeyNav为元素提供简单的按键处理方法示例
2013-07-03 09:46 851<!DOCTYPE html PUBLIC " ... -
Ext常用函数
2013-07-01 16:42 634函数一：Ext.onReady（） Ext的Dom都是动态生成 ... -
水平盒布局HBox
2013-07-01 15:43 491<!DOCTYPE html PUBLIC " ... -
表格布局
2013-07-01 15:18 524<!DOCTYPE html PUBLIC " ... -
Ext.layout.container.Column布局
2013-07-01 15:18 762<script type="text/java ... -
Absolute绝对位置布局示例
2013-07-01 14:35 401Ext.layout.container.Absolute对应 ... -
Card 卡片式布局
2013-06-28 16:40 954<!DOCTYPE html PUBLIC " ...
相关推荐
var textField = Ext.create('Ext.form.field.Text', { fieldLabel: '文本字段', id: 'readOnlyTextField' }); // 动态设置 readOnly 为 true textField.setReadOnly(true); ``` 在上述代码中，我们首先创建了一...
- 这个类继承自`Ext.form.field.Date`，并通过添加新的配置选项和方法来实现时间和日期的综合选择。 - **依赖组件**：`Ext.zc.form.DateTimePicker` - 此组件负责展示日期时间选择器界面，提供用户交互操作。 ###...
- **创建表单组件**：首先，定义一个FormPanel，并在其内部添加所需的表单字段，例如`Ext.form.field.Text`、`Ext.form.field.Date`等。 - **配置表单行为**：为FormPanel设置action属性，指定提交的URL，或者在...
8.1.3 格式化输出数据：ext.string、ext.number、ext.date和ext.util.format / 389 8.1.4 超级模板：ext.xtemplate（包括ext.xtemplateparser和ext.xtemplatecompiler） / 393 8.1.5 模板的方法 / 396 8.2 组件...
EXTJS的时间控件主要通过`Ext.form.field.Time`类来实现。这个类提供了一个标准的时间输入框，用户可以从中选择一个时间或者手动输入。默认情况下，EXTJS的时间控件只显示小时和分钟，但我们可以配置它以显示精确到...
它提供了一个用户友好的界面，让用户能够方便地选择日期和时间，通常与`Ext.form.field.Date`或`Ext.picker.Date`类相关联。控件支持多种格式化选项，可以自定义日期的显示方式，还允许设置最小和最大日期范围，以...
- **日期选择器 (`Ext.form.field.Date`)**：提供日期选择功能。 - **复选框组 (`Ext.form.field.CheckboxGroup`)**：一组复选框。 - **单选按钮组 (`Ext.form.field.RadioGroup`)**：一组单选按钮。 - **下拉...
- **示例**: `new Ext.form.TextField({ labelWidth: 100, labelAlign: 'right', allowBlank: false, listeners: { afterrender: function(field) { field.el.on('mouseover', function(e) { var tip = new Ext....
4. `Ext.form.field.Text`、`Ext.form.field.Date`等：表示不同的输入控件，用于收集用户输入。 5. `Ext.button.Button`：创建添加按钮，点击后触发添加操作。 6. `form.submit()`：表单提交事件，可以将数据发送到...
首先，EXTJS的DateField控件是基于Ext.form.field.Date类实现的。我们可以通过创建一个新的类，继承自这个基类，并覆盖或扩展其默认配置来实现我们需要的功能。在新的类中，我们可以添加时间选择的相关配置，如时间...
EXT JS 4 的日期控件（`Ext.form.field.Date`）通常用于让用户选择一个日期。默认情况下，它只显示日期部分，但通过扩展或配置，我们可以让它包含时间选择。这个控件基于浏览器的原生日期选择器进行增强，提供了一种...
每列可以通过设置`editor`属性来指定编辑器类型，例如`Ext.form.field.Text`、`Ext.form.field.Date`等。同时，还需要确保`treePanel`启用了`viewConfig.enableTextSelection: true`，以便在编辑时能够正确选择和...
var dateField = Ext.create('Ext.form.field.Date', { format: 'Y-m-d', altFormat: 'd/m/Y', submitValue: true, editable: false, allowBlank: false }); ``` 这里创建了一个日期选择器，设置了日期格式等...
ExtJS4中的日期字段（Ext.form.field.Date）是基础的日期选择组件。它使用内置的日期选择器小部件，允许用户选择一个日期。默认情况下，它只显示年、月、日，但可以通过配置扩展为包含时间元素。 2. **配置选项** ...
该控件的核心是`Ext.form.field.DateTimePicker`类，它继承自`Ext.form.field.Date`和`Ext.picker.DateTimePicker`。开发者可以通过配置属性来定制控件的显示样式、日期格式、时间间隔等。例如，你可以设置日期格式...
首先，ExtJS 4的日期时间控件一般会基于`Ext.form.field.Date`进行扩展，增加对时间的处理功能。开发者可能通过重写`createPicker`方法来创建一个包含时间选择的弹出窗口，并且修改模板以展示时、分、秒的部分。控件...
在EXT中，我们可以利用`Ext.form.field.Trigger`或`Ext.form.field.ComboBox`组件来实现自动完成功能。 首先，我们需要在服务器端建立一个C#服务，该服务负责处理来自客户端的请求，根据输入的查询字符串返回匹配的...
3. **DateTime Field（日期时间字段）**：如果需要同时选择日期和时间，可以使用`Ext.form.field.DateTimePicker`。这个组件将日期和时间选择器整合在一个输入框中，提供了一站式的日期时间选择体验。 4. **格式化*...
EXT JS的日期控件基于Ext.form.field.Date，它允许用户通过弹出的日历小部件选择日期。为了添加时间选择功能，我们需要一个能够处理时间和日期的混合控件。描述中提到的“ext自身控件不能选择时分秒”，意味着我们...
7. **表单处理**：Ext.form包是处理Web表单的核心，提供了各种表单字段（Field）、验证（Validation）和表单提交的功能。 8. **DHTML特效**：ExtJs还包括一些DHTML特效，如拖放（Drag & Drop）和动画（Animation）...