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:'日期选择框'??,
?????????????? //value: '01/01/2010'??//设置默认值
???????????????? value: new Date?//设置默认值
??????????? })?
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'?
??????????????? })?