数字类型——NumberField
{
header : '年龄',
dataIndex : 'age',
width : 100,
sortable : true,
editor:new Ext.Editor(new Ext.form.NumberField({
allowBlank:false,//不能为空
allowNegative:false,//不能输入负号
minValue:1,//可输入的最小值
maxValue:150 //可输入的最大值
}))
}
效果：
可以看到，编辑器我配置的是最大输入150，输入了151就提示错误了。
使用NumberField只能输入数字，输入其他的输入不了。
16.2下拉列表选择数据——ComboBox
16.2.1本地数据
//cmbobox的值
var cmbData = [['0','全部'],['1','Java'],['2','C++'],['3','Linux'],['4','Ext Js']];
{
header:"技术",
dataIndex:'technology',
sortable:true,
editor:new Ext.Editor(new Ext.form.ComboBox({
emptyText:"请选择技术",
name:"techonology",
readOnly:true,//如果设置为TRUE，则不能模糊查询；设置为FALSE，可以模糊查询，但是也可以输入其他内容。
mode:"local",// 从哪儿获取数据，默认是remote，即从服务器获取
valueField:"value",//值列，传递给Server的值，对应在store的fields中定义了2列
displayField:"text",//显示的列
triggerAction:'all',//如果没有配置为all，那么选择一项之后，就没法选择其他的项了，除非删除再重新选择。
store:new Ext.data.SimpleStore({
fields:['value','text'],
data:cmbData
})
}))
}
如果triggerAction没有配置为all，那么结果就是这样的。
这样就没法选择其他的项，除非删除再重新选择。triggerAction默认的配置是query，就是这样的效果。
那如果配置为all呢？
那可以看到，是可以选择其他的项的。
16.2.2远程数据——还有问题
不知道为什么，从server获取数据放入ComboBox始终没法成功，页面上下拉框无内容。网上看了很多文章，依照上面的来也不行。先把代码贴出来，以后再看看。
代码：
var store =new Ext.data.JsonStore({
url : './cmbnobox_json.jsp',
fields : ["deptNo","deptName"]
});
store.load();
newExt.form.ComboBox({
renderTo : document.body,
allowBlank : false,
emptyText : "请选择部门",
mode:"local",// 因为上面store已经将数据加载到本地了，因此使用local
valueField : "deptNo",
displayField : "deptName",
name : "department",
readOnly : true,
triggerAction : "all",
selectOnFocus:true,
store : store
});
后台返回的数据格式是二维数组的形式：
[[1,'研发部'],[2,'财务部'],[3,'人事部']]
返回其他Json格式也不行。即{root:[{id:1,name:’软件开发’}]}这种格式也不行。下拉框始终没有值。
16.2.3将Select转换成ComboBox
这种创建方式要求必须有一个select，Ext将数据抽取出来加到ComboBox中。
示例：
Js：
var cmb =new Ext.form.ComboBox({
transform:"select",
mode:"local",
triggerAction:"all",
listeners:{
change:function(c,oldV,newV) {
Ext.Msg.alert("title",oldV +"," + newV);
}
}
});
HTML：
<selectid="select">
<optionvalue="0">全部</option>
<optionvalue="1">开发</option>
<optionvalue="2">测试</option>
<optionvalue="3">管理</option>
</select>
不过，如果select中有optgroup，则会直接取option追加，就没有分组了。
<selectid="select">
<optgrouplabel="color">
<optionvalue="red">Red</option>
<optionvalue="green">Green</option>
<optionvalue="blue">Blue</option>
</optgroup>
<optionvalue="0">全部</option>
<optionvalue="1">开发</option>
<optionvalue="2">测试</option>
<optionvalue="3">管理</option>
</select>
16.2.4下拉列表分页——远程加载数据问题
加入pageSize配置就可以了，mode使用remote。
示例：
var store=new Ext.data.JsonStore({
proxy:new Ext.data.HttpProxy({
url:"./combobox_remote.jsp"
}),
reader:new Ext.data.JsonReader({
totalProperty:"total",
root:"items"
},["value","text"])
});
varcbx= new Ext.form.ComboBox({
store:store,
renderTo:document.body,
mode:"remote",
displayField:"text",
valueField:"value",
triggerAction:"all",
pageSize:6,
minListWidth:200,
forceSelection:true,//要求输入的值必须在列表中存在
resizable:true,//允许改变下拉列表的大小
typeAhead:true//自动将第一个搜索到的补全输入
});
store.load({
params:{
start:0,
limit:6
}
});
16.3日期控件——DateField
var birthday =new Ext.form.DateField({
allowBlank:false,
blankText:"请选择日期！",
emptyText:"选择日期",
format:"Y-m-d",
minValue:"1980-01-01",
maxValue:"2012-12-12",
disabledDates:["2000-01-01","09-10"],
disabledDatesText:"不能选择这个日期",
renderTo:Ext.getBody(),
validateOnBlur:true,
validator:function(v) {// 自定义验证方法
//返回的格式是yyyy-mm-dd，字符串。
//这个可以自己添加验证代码
},
value:"2012-10-10"//默认的日期
});
代码中设置了最小日期是1980-01-01，最大日期是2012-12-12，且不能选择2000-01-01，不能选择09-10这一天。
disabledDates可以是下面的形式：
- ["03/08/2003", "09/16/2003"] would disable those exact dates
- ["03/08", "09/16"] would disable those days for every year
- ["^03/08"] would only match the beginning (useful if you are using short years)
- ["03/../2006"] would disable every day in March 2006
- ["^03"] would disable every day in every March
- ["03/08/2003", "09/16/2003"] would disable those exact dates
- ["03/08", "09/16"] would disable those days for every year
- ["^03/08"] would only match the beginning (useful if you are using short years)
- ["03/../2006"] would disable every day in March 2006
- ["^03"] would disable every day in every March
- ["03/08/2003", "09/16/2003"] would disable those exact dates
- ["03/08", "09/16"] would disable those days for every year
- ["^03/08"] would only match the beginning (useful if you are using short years)
- ["03/../2006"] would disable every day in March 2006
- ["^03"] would disable every day in every March
- ["03/08/2003", "09/16/2003"] would disable those exact dates
- ["03/08", "09/16"] would disable those days for every year
- ["^03/08"] would only match the beginning (useful if you are using short years)
- ["03/../2006"] would disable every day in March 2006
- ["^03"] would disable every day in every March
["03/08/2003","09/16/2003"] would disable those exact dates
["03/08","09/16"] would disable those days for every year
["^03/08"]would only match the beginning (useful if you are using short years)
["03/../2006"]would disable every day in March 2006
["^03"]would disable every day in every March
16.4复选框——CheckBox
复选框代码很简单：
示例1：
var cbx =new Ext.form.Checkbox({
allowBlank:false,
el:document.body,
checked:true,
name:"cbx",
listeners:{
click:function(v) {
alert("click:" + v);
}
}
});
cbx.render();
alert(cbx.hasListener("click"));// true
alert(cbx.getValue()); // true
示例2：
var f =new Ext.form.FormPanel({
title:"Checkbox",
width:300,
autoHeight:200,
frame:true,
items:[
{
xtype:"fieldset",
title:"多选",
autoHeight:true,
items:[
{boxLabel:"Checkbox1",checked:true,xtype:"checkbox",hideLabel:true,inputValue:"1"},
{boxLabel:"Checkbox2",xtype:"checkbox",hideLabel:true,inputValue:"2"},
{boxLabel:"Checkbox3",xtype:"checkbox",hideLabel:true,inputValue:"3"}
]
}
],
renderTo:document.body
});效果：
boxLabel:标签显示到checkbox后面。默认的fieldLabel是显示在左边。需要将hideLabel设置为TRUE，否则左边的标签也会显示出来，很难看。
如果没有inputValue，传递到后台就没法区分到底选择的是哪一个。因为value的默认值是on，因此提交到后台的数据就是这样：checkbox=on&checkbox=on&checkbox=on。
那用inputValue来区分，提交到后台就是这样：checkbox=1&checkbox=2&checkbox=3。
16.5单选框——RADIO
Radio继承 自Ext.form.CheckBox，CheckBox有的功能它都有。那如果项制作一组单选框，则需要进行一些区别与CheckBox的配置了。
var f =new Ext.form.FormPanel({
title:"Radio",
width:300,
autoHeight:200,
frame:true,
items:[
{
xtype:"fieldset",
title:"单选",
autoHeight:true,
items:[
{boxLabel:"Radio1",checked:true,xtype:"radio",hideLabel:true,inputValue:"1",name:"radio"},
{boxLabel:"Radio2",xtype:"radio",hideLabel:true,inputValue:"2",name:"radio"},
{boxLabel:"Radio3",xtype:"radio",hideLabel:true,inputValue:"3",name:"radio"}
]
}
],
renderTo:"radio"
});
效果：
Name相同的单选框会放到一组，这3个单选框的name一样，这样一次就只能选择一个。
16.6文件上传
文件上传很简单，2步搞定：
1.给Form加上fileUpload:true;
2.给form添加一个field，设置inputType:file。
代码：
var f =new Ext.form.FormPanel({
title:"File Upload",
fileUpload:true,
width:750,
url:"./fileupload.jsp",
frame:true,
items:[
{
fieldLabel:"选择文件",
xtype:"textfield",
name:"file",
inputType:"file"
}
],
buttons:[{
text:"OK",
handler:function() {
f.getForm().submit();
}
}],
renderTo:Ext.getBody()
});
当然了，具体的上传功能还是需要自己去实现。