ExtJS4.2学习(18)时间控件

在ExtJs4.2表单控件里有个时间控件，但是官方提供的控件不能将日期和时分秒整合到一起，我从网上搜集整理了几个可用的控件。先来看下4.2自带的是什么效果：

上面的控件一点都不方便，而且选择的时候还不能精确到秒，以下是代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

<code>&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;</code>

<code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;</code>

<code>&lt;</code><code>html</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Content-Type"</code> <code>content</code><code>=</code><code>"text/html; charset=UTF-8"</code><code>&gt;</code>

<code>&lt;</code><code>title</code><code>&gt;Hello Extjs4.2&lt;/</code><code>title</code><code>&gt;</code>

<code>&lt;</code><code>link</code> <code>href</code><code>=</code><code>"../../ExtJS4.2/resources/ext-theme-neptune/ext-theme-neptune-all.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code><code>&gt;</code>

<code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"../../ExtJS4.2/ext-all.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"../../ExtJS4.2/locale/ext-lang-zh_CN.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;</code>

<code>Ext.onReady(function(){</code>

<code>                                          </code> 

<code>    </code><code>var field = new Ext.form.TextField({</code>

<code>        </code><code>fieldLabel: 'empty', //输入控件前显示名称</code>

<code>        </code><code>allowBlank: false, //是否允许为空</code>

<code>        </code><code>emptyText:'空', //没有输入任何内容提示文字</code>

<code>        </code><code>maxLength:50, //输入最大字符串长度</code>

<code>        </code><code>minLength:10 //输入最小字符串长度</code>

<code>    </code><code>});</code>

<code>                                              </code> 

<code>    </code><code>var fieldTextArea = new Ext.form.TextArea({</code>

<code>        </code><code>width:200,</code>

<code>        </code><code>grow:true, //会根据输入内容自动修改自身高度</code>

<code>        </code><code>preventScrollbars:true, //防止出现滚动条，如果内容超出显示范围就会自动隐藏</code>

<code>        </code><code>fieldLabel:'empty',</code>

<code>        </code><code>allowBlank:false,</code>

<code>        </code><code>emptyText:'空',</code>

<code>        </code><code>maxLength:50,</code>

<code>        </code><code>minLength:10</code>

<code>    </code><code>var fieldDate = new Ext.form.DateField({</code>

<code>        </code><code>fieldLabel:'日期',</code>

<code>        </code><code>emptyText:'请选择',</code>

<code>        </code><code>format:'Y-m-d',</code>

<code>        </code><code>disabledDays:[0,6] //禁止选择的日期</code>

<code>    </code><code>var timeDate = new Ext.form.TimeField({</code>

<code>        </code><code>fieldLabel:'时间',</code>

<code>        </code><code>format:'H:i:s',</code>

<code>        </code><code>increment:1 //时间颗粒度</code>

<code>    </code><code>var form = new Ext.form.FormPanel({</code>

<code>        </code><code>title: '表单输入控件演示',</code>

<code>        </code><code>width:500,</code>

<code>        </code><code>frame: true,</code>

<code>        </code><code>items: [field,fieldTextArea,fieldDate,timeDate],</code>

<code>        </code><code>renderTo: 'form'</code>

<code>});</code>

<code>&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>&lt;</code><code>h1</code><code>&gt;我的ExtJS4.2学习之路&lt;/</code><code>h1</code><code>&gt;</code>

<code>&lt;</code><code>hr</code> <code>/&gt;</code>

<code>作者：束洋洋</code>

<code>开始日期：2013年12月11日21:13:50</code>

<code>&lt;</code><code>h2</code><code>&gt;深入浅出ExtJS之文本输入控件Ext.form.TextField&lt;/</code><code>h2</code><code>&gt;</code>

<code>&lt;</code><code>div</code> <code>id</code><code>=</code><code>"form"</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

这种调用方式，这里给大家发一下：

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

<code>           </code> 

<code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"../../myplugin/dateTimeFileld/ux/UX_TimePickerField.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"../../myplugin/dateTimeFileld/ux/UX_DateTimePicker.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"../../myplugin/dateTimeFileld/ux/UX_DateTimeMenu.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"../../myplugin/dateTimeFileld/ux/UX_DateTimeField.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>    </code><code>Ext.Loader.setConfig({enabled:true});</code>

<code>    </code><code>Ext.Loader.setPath('MyApp', '../houtai/js');</code>

<code>    </code><code>Ext.define('MyApp.ux.DateTimeField', {</code>

<code>          </code><code>extend: 'Ext.form.field.Date',</code>

<code>          </code><code>alias: 'widget.datetimefield',</code>

<code>          </code><code>requires: ['MyApp.ux.DateTimePicker'],</code>

<code>          </code><code>initComponent: function() {</code>

<code>              </code><code>thisthis.format = this.format;</code>

<code>              </code><code>this.callParent();</code>

<code>          </code><code>},</code>

<code>          </code><code>// overwrite</code>

<code>          </code><code>createPicker: function() {</code>

<code>              </code><code>var me = this,</code>

<code>                  </code><code>format = Ext.String.format;</code>

<code>              </code><code>return Ext.create('MyApp.ux.DateTimePicker', {</code>

<code>                    </code><code>ownerCt: me.ownerCt,</code>

<code>                    </code><code>renderTo: document.body,</code>

<code>                    </code><code>floating: true,</code>

<code>                    </code><code>hidden: true,</code>

<code>                    </code><code>focusOnShow: true,</code>

<code>                    </code><code>minDate: me.minValue,</code>

<code>                    </code><code>maxDate: me.maxValue,</code>

<code>                    </code><code>disabledDatesRE: me.disabledDatesRE,</code>

<code>                    </code><code>disabledDatesText: me.disabledDatesText,</code>

<code>                    </code><code>disabledDays: me.disabledDays,</code>

<code>                    </code><code>disabledDaysText: me.disabledDaysText,</code>

<code>                    </code><code>format: me.format,</code>

<code>                    </code><code>showToday: me.showToday,</code>

<code>                    </code><code>startDay: me.startDay,</code>

<code>                    </code><code>minText: format(me.minText, me.formatDate(me.minValue)),</code>

<code>                    </code><code>maxText: format(me.maxText, me.formatDate(me.maxValue)),</code>

<code>                    </code><code>listeners: {</code>

<code>                        </code><code>scope: me,</code>

<code>                        </code><code>select: me.onSelect</code>

<code>                    </code><code>},</code>

<code>                    </code><code>keyNavConfig: {</code>

<code>                        </code><code>esc: function() {</code>

<code>                            </code><code>me.collapse();</code>

<code>                        </code><code>}</code>

<code>                    </code><code>}</code>

<code>                </code><code>});</code>

<code>          </code><code>}</code>

<code>      </code><code>});</code>

<code>        </code><code>items: [{</code>

<code>            </code><code>xtype:'datetimefield',</code>

<code>            </code><code>width : 300,</code>

<code>            </code><code>labelWidth : 80,</code>

<code>            </code><code>endDateField:'etime',</code>

<code>            </code><code>vtype:'daterange',</code>

<code>            </code><code>fieldLabel: '开始时间',</code>

<code>            </code><code>format: 'Y-m-d H:i:s ',</code>

<code>            </code><code>name:'stime'</code>

<code>        </code><code>},</code>

<code>        </code><code>{</code>

<code>            </code><code>startDateField:'stime',</code>

<code>            </code><code>fieldLabel: '结束时间',</code>

<code>            </code><code>name:'etime'</code>

<code>        </code><code>}],</code>

虽然解决了日期和时分秒的问题，但是体验还是有点差，囧。。。（4.2的控件必须先选择时分秒，再选择日期才可以，网上搜索了许多，希望可以有个带确定按钮的，但是都以失败告终，有些不符合，有些不能用，你如果找到了，请告诉我哈~）

本文转自shyy8712872 51CTO博客，原文链接：http://blog.51cto.com/shuyangyang/1404958，如需转载请自行联系原作者