1、combo下拉列表框:
xtype:'combo',
fieldLabel:'选择',
name:'combo',
store:new Ext.data.SimpleStore({
fields:['value','text'],
data:[
['value1','text1'],
['value2','text2'],
]
}),
displayField:'text',
valueField:'value',
mode:'local',
emptyText:'请选择',
readOnly:false--- 必须要写的,否则不会显示下拉列表框,只会显示一个文本框
2、文本框,文本域,日期控件,时间控件,在线编辑器
var textfield = new Ext.form.TextField({
fieldLabel:'empty',
allowBlank:false,
emptyText:'空',
maxLength:50,
minLength:10
});
设置了非空检测,并限制输入的字符数必须在10-50之间。其中emptyText会在输入为空时显示一个默认的提示信息
-----------------------------------------------------------------------------------------------------------------------------------------------
var textarea = new Ext.form.TextArea({
width:200,
grow:true,
preventScrollbars:true,
fieldLabel:'empty',
allowBlank:false,
maxLength:50,
minLength:10
});
grow:true , 文本域会根据输入的内容自动修改自身的宽度,preventScrollbars:true 是防止出现滚动条,如果内容
超出显示范围,就会自动隐藏
------------------------------------------------------------------------------------------------------------------------------------------------------
var dateField = new Ext.form.DateField({
fieldLabel:'日期',
emptyText:'请选择',
format:'y-m-d',
disabledDays:[0,6]
});
disabledDays的参数值是一个数组,内部包括0至7的整数,它可以禁止用户选择一周内的特定日期
------------------------------------------------------------------------------------------------------------------------------------
var timeField = new Ext.form.TimeField({
fieldLabel:'时间',
emptyText:'请选择',
minValue:'10:00 AM',
maxValue:'14:00 Pm',
increment:30
});
时间输入控件,将起始时间设置为上午十点,结束时间设置为下午两点,时间间隔为30分钟
----------------------------------------------------------------------------------------------------------------------------------------
var htmlEditor = new Ext.form.HtmlEditor({
fieldLabel:'在线编辑器',
enableAlignments:true,
enableColors:true,
enableFont:true,
enableFontSize:true,
enableFormat:true,
enableLinks:true,
enableLists:true,
enableSourceEdit:true
});
在线编辑器,enable就是启用或禁用某些功能按钮true,false
图下
---------------------------------------------------------------------------------------------------------------------------------------
隐藏域HiddenField
var hiddenfield = new Ext.form.Hidden({
name:'hiddenId'
});
hiddenfield.setValue("some thing");
var value = hiddenfield.getValue();
alert(value);
可以通过它的setValue()和getValue()函数对它执行赋值和取值操作,但它不会显示在页面上
---------------------------------------------------------------------------------------------------------------------------------------
var form = new Ext.form.FormPanel({
title:'form',
autoHeight:true,
frame:true,
items:[textfield,textarea,dateField],
renderTo:'form'
});