ExtJS4.2學習(八)表格限制輸入資料的類型

如何軟體和系統都會對輸入的資料類型進行限制。Ext提供了多種資料類型的元件，比如NumberField限制隻能輸入數字，ComboBox限制隻能輸入備選項，DateField限制隻能選擇日期，CheckBox則限制從true和false中選擇其一，等等。

效果：

選擇列：

日期列:

判斷列：

現在我們來修改之前的資料，讓資料類型變得更豐富，如下面的代碼：

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

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

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

<code>    </code><code>var</code> <code>comboData=[</code>

<code>                   </code><code>[</code><code>'0'</code><code>,</code><code>'新版ext教程'</code><code>],</code>

<code>                   </code><code>[</code><code>'1'</code><code>,</code><code>'ext線上支援'</code><code>],</code>

<code>                   </code><code>[</code><code>'2'</code><code>,</code><code>'ext擴充'</code><code>]</code>

<code>                   </code><code>];</code>

<code>    </code><code>var</code> <code>columns = [{</code>

<code>        </code><code>header:</code><code>'數字列'</code><code>,</code>

<code>        </code><code>dataIndex:</code><code>'number'</code><code>,</code>

<code>        </code><code>editor:</code><code>new</code> <code>Ext.form.NumberField({</code>

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

<code>            </code><code>allowNegative: </code><code>false</code><code>,</code>

<code>            </code><code>maxValue: 10</code>

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

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

<code>        </code><code>header:</code><code>'選擇列'</code><code>,</code>

<code>        </code><code>dataIndex:</code><code>'combo'</code><code>,</code>

<code>        </code><code>editor:</code><code>new</code> <code>Ext.form.ComboBox({</code>

<code>            </code><code>store: </code><code>new</code> <code>Ext.data.SimpleStore({</code>

<code>                </code><code>fields:[</code><code>'value'</code><code>,</code><code>'text'</code><code>],</code>

<code>                </code><code>data: comboData</code>

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

<code>            </code><code>emptyText: </code><code>'請選擇'</code><code>,</code>

<code>            </code><code>mode: </code><code>'local'</code><code>,</code>

<code>            </code><code>triggerAction: </code><code>'all'</code><code>,</code>

<code>            </code><code>valueField: </code><code>'value'</code><code>,</code>

<code>            </code><code>displayField: </code><code>'text'</code><code>,</code>

<code>            </code><code>editable: </code><code>false</code>

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

<code>        </code><code>renderer: </code><code>function</code><code>(value){</code>

<code>            </code><code>return</code> <code>comboData[value][1];</code>

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

<code>        </code><code>header:</code><code>'日期列'</code><code>,</code>

<code>        </code><code>dataIndex:</code><code>'date'</code><code>,</code>

<code>        </code><code>editor:</code><code>new</code> <code>Ext.form.DateField({</code>

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

<code>            </code><code>minValue: </code><code>'2007-12-14'</code><code>,</code>

<code>            </code><code>disabledDays: [0, 6],</code>

<code>            </code><code>disabledDaysText: </code><code>'隻能選擇工作日'</code>

<code>        </code><code>renderer: </code><code>function</code><code>(value) {</code>

<code>            </code><code>return</code> <code>Ext.Date.format(value, </code><code>"Y-m-d"</code><code>);</code>

<code>        </code><code>header:</code><code>'判斷列'</code><code>,</code>

<code>        </code><code>dataIndex:</code><code>'check'</code><code>,</code>

<code>        </code><code>editor:</code><code>new</code> <code>Ext.form.Checkbox({</code>

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

<code>        </code><code>renderer:</code><code>function</code><code>(value) {</code>

<code>            </code><code>return</code> <code>value ? </code><code>'是'</code> <code>: </code><code>'否'</code><code>;</code>

<code>    </code><code>}];</code>

<code>    </code><code>// 放到grid裡顯示的原始資料</code>

<code>    </code><code>var</code> <code>data = [</code>

<code>        </code><code>[1.1,1,</code><code>new</code> <code>Date(),</code><code>true</code><code>],</code>

<code>        </code><code>[2.2,2,</code><code>new</code> <code>Date(),</code><code>false</code><code>],</code>

<code>        </code><code>[3.3,0,</code><code>new</code> <code>Date(),</code><code>true</code><code>],</code>

<code>        </code><code>[4.4,1,</code><code>new</code> <code>Date(),</code><code>false</code><code>],</code>

<code>        </code><code>[5.5,2,</code><code>new</code> <code>Date(),</code><code>true</code><code>]</code>

<code>    </code><code>];</code>

<code>          </code> 

<code>      </code> 

<code>    </code><code>var</code> <code>store = </code><code>new</code> <code>Ext.data.ArrayStore({</code>

<code>        </code><code>data: data,</code>

<code>        </code><code>fields: [</code>

<code>            </code><code>{name: </code><code>'number'</code><code>},</code>

<code>            </code><code>{name: </code><code>'combo'</code><code>},</code>

<code>            </code><code>{name: </code><code>'date'</code><code>},</code>

<code>            </code><code>{name: </code><code>'check'</code><code>}</code>

<code>        </code><code>]</code>

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

<code>    </code><code>store.load();</code>

<code>    </code><code>var</code> <code>grid = </code><code>new</code> <code>Ext.grid.GridPanel({</code>

<code>        </code><code>autoHeight: </code><code>true</code><code>,</code>

<code>        </code><code>renderTo: </code><code>'grid'</code><code>,</code>

<code>        </code><code>store: store,</code>

<code>        </code><code>columns: columns,</code>

<code>        </code><code>selType: </code><code>'cellmodel'</code><code>,</code>

<code>        </code><code>plugins: [</code>

<code>            </code><code>Ext.create(</code><code>'Ext.grid.plugin.CellEditing'</code><code>, {</code>

<code>                </code><code>clicksToEdit: 1</code>

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

<code>});</code>

大家仔細研究一下渲染函數renderer。經常有人會遇到EditorGrid裡的ComboBox無法正常顯示資料的情況，其實，這是因為少了這個renderer函數。當沒寫這個函數時，顯示的資料是value值，而不是text。畢竟Editor裡的編輯器隻在實際編輯時起作用，表格與editor質檢共享的是資料，顯示層都要依靠各自的實作。不夠這樣做更靈活，不需要兩者都使用一樣的顯示方式。

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