ExtJS4.2学习(八)表格限制输入数据的类型-白红宇

如何软件和系统都会对输入的数据类型进行限制。Ext提供了多种数据类型的组件，比如NumberField限制只能输入数字，ComboBox限制只能输入备选项，DateField限制只能选择日期，CheckBox则限制从true和false中选择其一，等等。
效果：

选择列：

日期列:

判断列：

现在我们来修改之前的数据，让数据类型变得更丰富，如下面的代码：

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