EXTJS 常用控件的使用

最新推荐文章于 2018-08-30 13:16:06 发布

原创最新推荐文章于 2018-08-30 13:16:06 发布 · 3.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #books #url #function #email #json

EXTJS 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了EXTJS中的多种控件使用，包括重要按钮配置项、NumberField的数字限制、TextArea、Radio与Checkbox的用法、TriggerField及Combobox的本地和远程模式，还有TimeField和DateField的时间日期选择，以及Hidden控件和FieldSet的使用。此外，还提到了TextField的vtype输入格式验证，如电子邮件、网址等。

重要按钮配置项 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' })