Ext限制输入的数据类型

数字类型——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()

});

 

 

当然了，具体的上传功能还是需要自己去实现。