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，如需轉載請自行聯系原作者