EXTJS 常用控件的使用

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