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