ExtJS4.2學習(17)表單基本輸入控件Ext.form.Field

Ext.form.Field是所有表單輸入控件的基類，其他的輸入控件都是基于Ext.form.Field擴充得來的。 Ext.form.Field中定義了輸入控件通用的屬性和功能函數，這些通用的屬性和功能函數大緻分為3大類：頁面顯示樣式、控件參數配置和資料有效性檢驗。我們先來看看表單輸入控件可以使用的校驗顯示方式。預設情況下，這些輸入控件會監聽blur事件，如果資料校驗失敗，就會根據msgTarget中的設定顯示錯誤資訊。通常，msgTarget會被設定為qtip，即使用QuickTip顯示錯誤資訊，也可以将msgTarget設定為title、side、under中的一種，這樣錯誤資訊就會以指定的方式顯示。因為所有的輸入控件都繼承自 Ext.form.Field，是以我們可以為任何一個表單輸入控件進行這些設定，改變它們的錯誤資訊顯示方式。具體代碼如下：

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

<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>// HtmlEditor需要這個</code>

<code>    </code><code>Ext.tip.QuickTipManager.init();</code>

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

<code>        </code><code>fieldLabel: 'qtip錯誤顯示方式',</code>

<code>        </code><code>msgTarget: 'qtip',</code>

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

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

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

<code>        </code><code>fieldLabel: 'title錯誤顯示方式',</code>

<code>        </code><code>msgTarget: 'title',</code>

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

<code>        </code><code>fieldLabel: 'side錯誤顯示方式',</code>

<code>        </code><code>msgTarget: 'side',</code>

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

<code>        </code><code>fieldLabel: 'under錯誤顯示方式',</code>

<code>        </code><code>msgTarget: 'under',</code>

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

<code>        </code><code>title: '表單輸入控件示範',</code>

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

<code>        </code><code>fieldDefaults:{</code>

<code>            </code><code>labelAlign:'right', //文本對齊方式</code>

<code>            </code><code>labelWidth:150</code>

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

<code>        </code><code>items: [field1, field2, field3, field4],</code>

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

<code>    </code><code>form.getForm().isValid();</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:01:19</code>

<code>&lt;</code><code>h2</code><code>&gt;深入淺出ExtJS之表單基本輸入控件Ext.form.Field&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>

qtip方式：預設顯示方式，顯示為懸浮框提示錯誤文字；

title方式：類似HTML超連結中設定的title;

side方式：輸入框後出現錯誤圖示，滑鼠放上去會顯示錯誤資訊;

under方式：文本框下方出現錯誤提示圖示和文字.

接下來會對上節中出現的控件一一作介紹，本篇先說說文本輸入控件(Ext.form.TextField)、多行文本輸入控件（Ext.form.TextArea）和日期輸入控件(Ext.form.DateField)

代碼如下，相關屬性已經在注釋中寫明。

<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>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>}); </code>

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

<code>        </code><code>items: [field,fieldTextArea,fieldDate],</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>

本文轉自shyy8712872 51CTO部落格，原文連結：http://blog.51cto.com/shuyangyang/1404502，如需轉載請自行聯系原作者