Extjs4.0.7 Formpanel 中各组件属性详解--（持续更新）
1、ComboBox
var store = new Ext.data.SimpleStore({
fields :['id', 'text'],
data : [['1','一月'], ['2', '二月'], ['3', '三月'], ['4', '四月'],
['5','五月'], ['6', '六月'], ['7', '七月'], ['8', '八月'],
['9','九月'], ['10', '十月'], ['11', '十一月'], ['12', '十二月']]
});
var combo = new new Ext.form.ComboBox({
id :'myCombo',
name :'name',// name只是改下拉的名称
hiddenName :'id',// 提交到后台的input的name ，对应下面store里的''id，必须要填
width :80,
store :store,// 填充数据
emptyText :'请选择',
mode :'local',// 数据模式，local代表本地数据
readOnly :true,// 是否只读
value : '',//默认值,要设置为提交给后台的值，不要设置为显示文本,可选
triggerAction: 'all',// 显示所有下列数据，一定要设置属性triggerAction为all
allowBlank :false,// 不允许为空
valueField :'value',// 值,可选
displayField: 'text',// 显示文本 ，对应下面store里的'text'，
editable :false,// 是否允许输入
forceSelection: true,// 必须选择一个选项
blankText :'请选择'// 该项如果没有选择，则提示错误信息,
listeners : {
afterRender : function(combo) {
var firstValue = store.reader.jsonData[0].text;
combo.setValue(firstValue);//同时下拉框会将与name为firstValue值对应的text显示
}
}
combo.on('load',function(){Ext.getCmp("myCombo").setValue(1);});
//combobox里的id一定要设置，并且不能和hiddenname的值相同，然后通过Ext.getCmp(id值).setValue(value)即可达到html里的select效果，注意这里的value表示的是store里的第几项！
其他说明：
/*
Ext.form.ComboBox配置表:
allQuery String 发往服务器查询全部信息的查询字符串(默认'')
displayField String 被显示在下拉框中字段名
editable Boolean 设置下拉框是否可以编辑(默认true)
forceSelection Boolean true输入值必须在列表中存在，false用户可输入任何值
handleHeight Number 下拉列表中拖动手柄高(默认8,只在resizable配置为true生效)
hiddenName String 隐藏字段名，创建一隐藏字段，存储所选值
lazyInit Boolean 下拉框得到焦点才初始化下拉列表(默认true)
lazyRender Boolean 延时渲染(默认false)
listAlign String 列表对齐方式
listClass String 应用于下拉列表元素的样式
listWidth Number 下拉列表宽度
loadingText String 当下拉框加载时显示提示信息(只有mode='remote'才生效)
maxHeight Number 下拉框最大高度(默认300)
minChars Number 下拉列表框自动选择用户要输入的最小字符数
mode='remote'默认4
mode='local'默认0
editable=false使其自动失效
minListWidth Number 设置下拉列表最小宽度,listWidth宽度大于最小宽度，该项被忽略
mode String 设置下拉框数据读取模式
local:读取本地数据
remote:读取远程数据
pageSize Number 设置下拉列表分页大小(只在mode='remote'生效)
queryDelay Number 设置从键入字符结束到发送查询请求的延时
mode="remote"默认500
mode="local"默认10
queryParam String 查询的名字,默认'query'，被传递查询字符串中
selectOnFocus Boolean 当获得焦点立刻选择一存在列表项(默认false),只在editable=true生效
store Ext.data.Store 列表框绑定数据源(默认undefined)
title String 列表框头
transform Mixed 将页面以存在元素转换组合框
triggerAction String 设置单击触发按钮执行默认操作，值'all'执行allQuery中查询，'query'
typeAhead Boolean 设置输入中是否自动匹配剩余文本(默认false)
typeAheadDelay Number 设置输入中自动匹配剩余文本延时时间(默认250)
value String 初始化组合框中值
valueField String 下拉框值自段
valueNotFoundText String 值不存在时错误信息提示
*/
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../extjs2.0/resources/images/default/s.gif';
var config = {
fields:['province','post'],
data:[['北京','10000'],['通县','101100'],['昌平','102200'],['大兴','102600'],
['密云','101500'],['延庆','102100'],['顺义','101300'],['怀柔','101400']]
}
//定义组合框中显示的数据源
var store = new Ext.data.SimpleStore(config);
config = {
title:'Ext.form.ComboBox示例',
labelSeparator:':',
labelWidth:80,
bodyStyle:'padding:5 5 5 5',
frame:true,
height:100,
width:300,
renderTo:'form',
items:[
new Ext.form.ComboBox({
id:'post',
fieldLabel:'邮政编码',
triggerAction:'all', //单击触发按钮显示全部数据
//设置数据源
store:store,
displayField:'province', //定义要显示的字段
valueField:'post', //定义值字段
mode:'local', //本地模式
forceSelection:true, //要求输入的值必须在列表中存在
resizable:true, //允许改变下拉列表大小
typeAhead:true, //允许自动选择剩余部分文本
value:'101100', //默认选择的项
handelHeight:10 //下拉列表中拖动手柄的高度
})
]
}
var form = new Ext.form.FormPanel(config);
});
2、Window
一、属性
plain：布尔类型，true表示强制与背景色保持协调，默认值为false。
resizable：布尔类型，用户是否可以调整窗体大小，默认值为true表示可以调整大小。
maxinizable：布尔类型，true表示显示最大化按钮，默认值为false。
maximized：布尔类型，true表示显示窗体时将窗体最大化，默认值为false。
closable：布尔类型，true表示显示关闭按钮，默认值为true。
bodyStyle：与边框的间距，如：bodyStyle:"padding:3px"。
buttonAlign：窗体中button的对齐方式(left、center、right)，默认值为right。
closeAction："close"释放窗体所占内存，"hide"隐藏窗体，建议使用"hide"。
二、方法
show：打开窗体。
hide：隐藏窗体。
close：关闭窗体。
三、事件
show：打开窗体时触法。
hide：隐藏窗体时触法。
close：关闭窗体时触法。
3、NumberField
new Ext.form.NumberField({
fieldLabel:'整数',
allowDecimals:false, //不允许输入小数
nanText:'请输入有效整数', //无效数字提示
allowNegative:false //不允许输入负数
}),
new Ext.form.NumberField({
fieldLabel:'小数',
decimalPrecision:2, //精确到小数点后2位(执行4舍5入)
allowDecimals:true, //允许输入小数
nanText:'请输入有效小数',
allowNegative:false
}),
new Ext.form.NumberField({
fieldLabel:'数字限制',
nanText:'请输入有效数字',
baseChars:'12345' //输入数字范围
}),
new Ext.form.NumberField({
fieldLabel:'数字限制',
maxValue:100, //最大值
maxText:'值太大',
minValue:50, //最小值
minText:'值太小'
})
隐藏上下递增箭头、键盘导航、鼠标滚轮
var numberFiled = new Ext.form.NumberField({
width: 200,
name: 'numberField',
value: 90,
hideTrigger: true,
keyNavEnabled: true,
mouseWheelEnabled: true,
step:5, //设置步进
listeners: { //处理change事件
change: function(field, value) {
value = parseInt(value, 10);
field.setValue(value + value % 2);
}
},
renderTo: 'div1'
});
4、Radio 、 Checkbox
new Ext.form.Radio({
name:'sex', //名字相同的单选框做为一组
fieldLabel:'性别',
boxLabel:'男'
}),
new Ext.form.Radio({
name:'sex',
fieldLabel:'性别',
boxLabel:'女'
}),
new Ext.form.Checkbox({
name:'swim',
fieldLabel:'爱好',
boxLabel:'游泳'
}),
new Ext.form.Checkbox({
name:'walk',
fieldLabel:'爱好',
boxLabel:'散步'
})
如果需要提交后台定制的数值应如下：（ext默认会提交后台的是on/null）
field: {
xtype: 'checkboxfield',
inputValue: 'true',
uncheckedValue: 'false',
boxLabel: '激活与否'
}
5、触发字段 TriggerField
//触发字段
new Ext.form.TriggerField({
id:'memo', //id
fieldLabel:'触发字段',
hideTrigger:false, //显示触发按钮
//单击触发按钮后事件处理
onTriggerClick:function(e)
{
var memo = form.findById('memo'); //取得输入控件
var config = {
title:'触发字段值:',
msg:memo.getValue(), //取得控件值
width:200
}
Ext.Msg.show(config);
}
})
6、DateField
/*
Ext.form.DateField主要配置表:
altFormats String 多个日期输入格式组成字符串，不同格式用|隔开
disabledDates Array 禁止选择日期组成数组
disabledDatesText String 禁止选择日期错误提示
disabledDays Array 禁止星期组成数组
disabledDaysText String 禁止星期错误提示
format String 日期格式(默认'm/d/y')
maxValue Date/String 允许选择最大日期
maxText String 最大日期错误信息提示
minValue Date/String 允许选择最小日期
minText String 最小日期错误信息提示
["09/16/2003","03/08/2003"] 禁止选09/16/2003和03/08/2003
["03/08","09/16"] 禁止选每年03/08和09/16
["^03/08"] 匹配日期开始部分，禁止选每年03/08
["03/../2006"] 禁止选2006年3月的任何一天
["^03"] 禁止选任何3月的任何一天
*/
new Ext.form.DateField({
id:'date',
format:'Y年m月d日',
maxValue:'12/31/2008',
maxText:'所选日期小于{0}',
minValue:'01/01/2008',
disabledDates:["2008年03月12日"], //禁止选择2008年03月12日
width:150,
fieldLabel:'日期选择'
7、TimeField
/*
Ext.form.TimeField主要配置表:
altFormats String 多个时间格式组成的字符串
format String 显示格式(默认'g:i:A')
maxValue Date/String 列表中允许的最大时间
maxText String 最大时间错误提示信息
minValue Date/String 列表中允许的最小时间
minText String 最小时间错误提示信息
increment Number 时间列表中相邻项间时间间隔(默认15分钟)
*/
new Ext.form.TimeField({
id:'time',
width:150,
maxValue:'18:00', //最大时间
maxText:'所选时间小于{0}',
minValue:'10:00', //最小时间
minText:'所选时间大于{0}',
maxHeight:70,
increment:60, //时间间隔
format:'G时i分s秒', //时间格式
invalidText:'时间格式无效',
fieldLabel:'时间选择框'
})
8、多行文本 TextArea
/*
Ext.form.TextArea独有配置表:
preventScrollbars Boolean 文本溢出是否显示滚动条，true隐藏滚动条(默认false)
*/
new Ext.form.TextArea({
id:'memo',
widht:150,
fieldLabel:'备注'
})
//保存时事件处理
function showValue()
{
var memo = form.findById('memo'); //取得输入框控件
var config = {
title:'TextArea值是:',
msg:memo.getValue(), //取得控件值
width:200
}
Ext.Msg.show(config);
}
9、其他
重要按钮配置项 handler: renderTo:
取得控件及其值
var memo = form.findById('memo');//取得输入控件
alert(memo.getValue());//取得控件值
NumberField控件
整数，小数，数字限制，值范围限制
new Ext.form.NumberField({
fieldLabel:'整数',
allowDecimals : false,//不允许输入小数
allowNegative : false,//不允许输入负数
nanText :'请输入有效的整数',//无效数字提示
}),
new Ext.form.NumberField({
fieldLabel:'小数',
decimalPrecision : 2,//精确到小数点后两位
allowDecimals : true,//允许输入小数
nanText :'请输入有效的小数',//无效数字提示
allowNegative :false//允许输入负数
}),
new Ext.form.NumberField({
fieldLabel:'数字限制',
baseChars :'12345'//输入数字范围
}),
new Ext.form.NumberField({
fieldLabel:'数值限制',
maxValue : 100,//最大值
minValue : 50//最小值
})
TextArea 控件
Radio或Checkbox用法 box类
new Ext.form.Radio({
name : 'sex',//名字相同的单选框会作为一组
fieldLabel:'性别',
boxLabel : '男'
}),
new Ext.form.Radio({
name : 'sex',//名字相同的单选框会作为一组
fieldLabel:'性别',
boxLabel : '女'
}),
在一排
new Ext.form.Radio({
name : 'sex',//名字相同的单选框会作为一组
itemCls:'float-left',//向左浮动
clearCls:'allow-float',//允许浮动
fieldLabel:'性别',
boxLabel : '男'
}),
new Ext.form.Radio({
name : 'sex',//名字相同的单选框会作为一组
clearCls:'stop-float',//阻止浮动
hideLabel:true, //横排后隐藏标签
boxLabel : '女'
}),
new Ext.form.Checkbox({
name : 'swim',
fieldLabel:'爱好',
boxLabel : '游泳'
}),
在一排
new Ext.form.Checkbox({
name : 'swim',
itemCls:'float-left',//向左浮动
clearCls:'allow-float',//允许浮动
fieldLabel:'爱好',
boxLabel : '游泳'
}),
new Ext.form.Checkbox({
name : 'walk',
clearCls:'stop-float',//允许浮动
hideLabel:true, //横排后隐藏标签
boxLabel : '散步'
})
TriggerField （很像一个默认combobox）
new Ext.form.TriggerField({
id:'memo',
fieldLabel:'触发字段',
hideTrigger : false,
onTriggerClick : function(e){
}
})
combobox下拉菜单控件
1.本地模式
本地数据源：
数据源的定义：
var store = new Ext.data.SimpleStore({//定义组合框中显示的数据源
fields: ['province', 'post'],
data : [['北京','100000'],['通县','101100'],['昌平','102200'],
['大兴','102600'],['密云','101500'],['延庆','102100'],
['顺义','101300'],['怀柔','101400']]
});
new Ext.form.ComboBox({
id:'post',
fieldLabel:'邮政编码',
triggerAction: 'all',//单击触发按钮显示全部数据
store : store,//设置数据源
displayField:'province',//定义要显示的字段
valueField:'post',//定义值字段
mode: 'local',//本地模式
forceSelection : true,//要求输入值必须在列表中存在
resizable : true,//允许改变下拉列表的大小
typeAhead : true,//允许自动选择匹配的剩余部分文本
value:'102600',//默认选择大兴
handleHeight : 10//下拉列表中拖动手柄的高度
})
2.远程模式
远程数据源
var store = new Ext.data.SimpleStore({
proxy : new Ext.data.HttpProxy({//读取远程数据的代理
url : 'bookSearchServer.jsp'//远程地址
}),
fields : ['bookName']
});
new Ext.form.ComboBox({
id:'book',
allQuery:'allbook',//查询全部信息的查询字符串
loadingText : '正在加载书籍信息',//加载数据时显示的提示信息
minChars : 3,//下拉列表框自动选择前用户需要输入的最小字符数量
queryDelay : 300,//查询延迟时间
queryParam : 'searchbook',//查询的名字
fieldLabel:'书籍列表',
triggerAction: 'all',//单击触发按钮显示全部数据
store : store,//设置数据源
displayField:'bookName',//定义要显示的字段
mode: 'remote'//远程模式,
})
远程json数据源
var store = new Ext.data.JsonStore({
url : 'bookSearchServerPage.jsp',//远程地址
totalProperty : 'totalNum',
root : 'books',
fields : ['bookName']
});
分页式组合框
new Ext.form.ComboBox({
id:'book',
fieldLabel:'书籍列表',
store : store,//设置数据源
allQuery:'allbook',//查询全部信息的查询字符串
triggerAction: 'all',//单击触发按钮显示全部数据
listWidth : 230,//指定列表宽度
editable : false,//禁止编辑
loadingText : '正在加载书籍信息',//加载数据时显示的提示信息
displayField:'bookName',//定义要显示的字段
mode: 'remote',//远程模式
pageSize : 3//分页大小
})
转select 为 combobox
new Ext.form.ComboBox({
name:'level',
fieldLabel:'职称等级',
lazyRender : true,
triggerAction: 'all',//单击触发按钮显示全部数据
transform : 'levelName'
})
<SELECT ID="levelName">
<OPTION VALUE="1">高级工程师</OPTION>
<OPTION VALUE="2">中级工程师</OPTION>
<OPTION VALUE="3" SELECTED>初级工程师</OPTION>
<OPTION VALUE="4">高级经济师</OPTION>
<OPTION VALUE="5">中级经济师</OPTION>
<OPTION VALUE="6">初级经济师</OPTION>
</SELECT>
TimeField 控件
new Ext.form.TimeField({
id:'time',
width : 150,
maxValue : '18:00',//最大时间
maxText : '所选时间应小于{0}',//大于最大时间的提示信息
minValue : '10:00',//最小时间
minText : '所选时间应大于{0}',//小于最小时间的提示信息
maxHeight : 70,//下拉列表的最大高度
increment : 60,//时间间隔为60分钟
format : 'G时i分s秒',//G标示为24时计时法
invalidText :'时间格式无效',
fieldLabel:'时间选择框'
})
DateField 控件
new Ext.form.DateField({
id:'date',
format:'Y年m月d日',//显示日期的格式
maxValue :'12/31/2008',//允许选择的最大日期
minValue :'01/01/2008',//允许选择的最小日期
disabledDates : ["2008年03月12日"],//禁止选择2008年03月12日
disabledDatesText :'禁止选择该日期',
disabledDays : [0,6],//禁止选择星期日和星期六
disabledDaysText : '禁止选择该日期',
width : 150,
fieldLabel:'日期选择框'
})
Hidden 控件
new Ext.form.Hidden({//隐藏域
name:'age',
width : 150,
fieldLabel:'年龄'
}),
FieldSet控件相当于groupBox
new Ext.form.FieldSet({
title:'产品信息',
labelSeparator :'：',//分隔符
items:[
new Ext.form.TextField({
fieldLabel:'产地'
}),
new Ext.form.NumberField({
fieldLabel:'售价'
})
]
}),
TextField控件
vtype 输入格式属性应用
new Ext.form.TextField({
fieldLabel:'电子邮件',
width : 170,
vtype:'email'
}),
new Ext.form.TextField({
fieldLabel:'网址',
width : 170,
vtype:'url'
}),
new Ext.form.TextField({
fieldLabel:'字母',
width : 170,
vtype:'alpha'
}),
new Ext.form.TextField({
fieldLabel:'字母和数字',
width : 170,
vtype:'alphanum'
})