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，如需转载请自行联系原作者