ExtJs 一些常用的控件

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'  
                })