如何软件和系统都会对输入的数据类型进行限制。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
|
Ext.onReady(
function
(){
var
comboData=[
[
'0'
,
'新版ext教程'
],
[
'1'
,
'ext在线支持'
],
[
'2'
,
'ext扩展'
]
];
var
columns = [{
header:
'数字列'
,
dataIndex:
'number'
,
editor:
new
Ext.form.NumberField({
allowBlank:
false
,
allowNegative:
false
,
maxValue: 10
})
},{
header:
'选择列'
,
dataIndex:
'combo'
,
editor:
new
Ext.form.ComboBox({
store:
new
Ext.data.SimpleStore({
fields:[
'value'
,
'text'
],
data: comboData
}),
emptyText:
'请选择'
,
mode:
'local'
,
triggerAction:
'all'
,
valueField:
'value'
,
displayField:
'text'
,
editable:
false
}),
renderer:
function
(value){
return
comboData[value][1];
}
},{
header:
'日期列'
,
dataIndex:
'date'
,
editor:
new
Ext.form.DateField({
format:
'Y-m-d'
,
minValue:
'2007-12-14'
,
disabledDays: [0, 6],
disabledDaysText:
'只能选择工作日'
}),
renderer:
function
(value) {
return
Ext.Date.format(value,
"Y-m-d"
);
}
},{
header:
'判断列'
,
dataIndex:
'check'
,
editor:
new
Ext.form.Checkbox({
allowBlank:
false
}),
renderer:
function
(value) {
return
value ?
'是'
:
'否'
;
}
}];
// 放到grid里显示的原始数据
var
data = [
[1.1,1,
new
Date(),
true
],
[2.2,2,
new
Date(),
false
],
[3.3,0,
new
Date(),
true
],
[4.4,1,
new
Date(),
false
],
[5.5,2,
new
Date(),
true
]
];
var
store =
new
Ext.data.ArrayStore({
data: data,
fields: [
{name:
'number'
},
{name:
'combo'
},
{name:
'date'
},
{name:
'check'
}
]
});
store.load();
var
grid =
new
Ext.grid.GridPanel({
autoHeight:
true
,
renderTo:
'grid'
,
store: store,
columns: columns,
selType:
'cellmodel'
,
plugins: [
Ext.create(
'Ext.grid.plugin.CellEditing'
, {
clicksToEdit: 1
})
]
});
});
|
大家仔细研究一下渲染函数renderer。经常有人会遇到EditorGrid里的ComboBox无法正常显示数据的情况，其实，这是因为少了这个renderer函数。当没写这个函数时，显示的数据是value值，而不是text。毕竟Editor里的编辑器只在实际编辑时起作用，表格与editor质检共享的是数据，显示层都要依靠各自的实现。不够这样做更灵活，不需要两者都使用一样的显示方式。
本文转自shyy8712872 51CTO博客，原文链接：http://blog.51cto.com/shuyangyang/1334068，如需转载请自行联系原作者
