第八讲ExtJS组件之Panel(上).doc

示例一：最简单的FormPanel示例。Ext.onReady(function()var form = new Ext.FormPanel(renderTo:form,title:表单Panel,width:300,height:300,frame:true,items:new Ext.form.TextField(fieldLabel:你的姓名););labelSeparator分隔符labelWidth标签宽度labelAlign标签对齐方式示例二：调整标签样式。Ext.onReady(function()var form = new Ext.FormPanel(renderTo:form,title:表单Panel,width:300,height:300,frame:true,labelSeparator:,labelWidth:100,labelAlign:right,items:new Ext.form.TextField(fieldLabel:你的姓名););validateOnBlur 是否在失去焦点时进行校验validationDelay 校验延迟minLength:最小长度minLengthText 最小长度显示提示信息allowBlank是否允许为空blankText/为空之后的提示信息msgTarget提示信息显示方式。msgTarget :qtip/显示一个浮动的提示信息。msgTarget :title/显示一个浏览器原始的浮动提示信息。msgTarget :under/在字段下方显示一个提示信息。msgTarget :side/在字段的右边显示一个提示信息。示例三：字段校验。Ext.onReady(function()Ext.QuickTips.init();var form = new Ext.FormPanel(renderTo:form,title:表单Panel,width:300,height:300,frame:true,labelSeparator:,labelWidth:100,labelAlign:right,items:new Ext.form.TextField(fieldLabel:你的姓名,validateOnBlur:true,validationDelay:2000,minLength:2,minLengthText:请输入长度为2以上的姓名,allowBlank:false,blankText:名字不能为空,msgTarget :qtip),new Ext.form.NumberField(fieldLabel:你的年龄,validateOnBlur:true,validationDelay:2000,maxLength:3,maxLengthText:请输入正确的年龄,allowBlank:false,blankText:名字不能为空,msgTarget :qtip););示例四：用户登陆页面Ext.onReady(function()Ext.QuickTips.init();var form = new Ext.FormPanel(renderTo:form,title:表单Panel,width:300,height:300,frame:true,labelSeparator:,labelWidth:100,labelAlign:right,items:new Ext.form.TextField(fieldLabel : 用户名,id : userName,selectOnFocus : true,allowBlank : false,/验证电子邮件格式的正则表达式regex : /(w+)(.w+)*(w-+.)1,5(A-Za-z)2,4$/,regexText:用户名格式错误),new Ext.form.TextField(id : password,fieldLabel : 密码,inputType : password,allowBlank : false,blankText:密码不能为空),buttons:text:登陆,handler:function() Ext.MessageBox.alert(登陆成功,用户名 + form.findById(userName).getValue() + ,密码 + form.findById(password).getValue();););示例五：TextArea示例。Ext.onReady(function()Ext.QuickTips.init();var form = new Ext.FormPanel(renderTo:form,title:表单Panel,width:300,height:300,frame:true,labelSeparator:,labelWidth:30,labelAlign:right,items:new Ext.form.TextArea(id:memo,width:250,height:300,fieldLabel: 备注),buttons:text:提交,handler:function() Ext.MessageBox.alert(备注信息 + form.findById(memo).getValue();););NumberField数字字段整数限制。allowDecimals : false,/不允许输入小数allowNegative : false,/不允许输入负数nanText :请输入有效的整数,/无效数字提示allowNegative :false/不允许输入负数小数限制。decimalPrecision : 2,/精确到小数点后两位allowDecimals : true,/允许输入小数nanText :请输入有效的小数,/无效数字提示allowNegative :false/允许输入负数数字范围限制baseChars :12345/输入数字范围数值范围限制maxValue : 100,/最大值minValue : 50/最小值示例六：NumberField数字字段示例Ext.onReady(function()Ext.QuickTips.init();var form = new Ext.FormPanel(renderTo:form,title:表单Panel,width:300,height:300,frame:true,labelSeparator:,labelWidth:30,labelAlign:right,items:new Ext.form.NumberField(fieldLabel:整数,allowDecimals : false,/不允许输入小数allowNegative : false,/不允许输入负数nanText :请输入有效的整数,/无效数字提示allowNegative :false/不允许输入负数),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,/最小值maxText:最大数为100,minText:最小数为50););示例七：Ext.form.Checkbox和Ext.form.RadioExt.onReady(function()Ext.QuickTips.init();var form = new Ext.FormPanel(renderTo:form,title:表单Panel,width:300,height:300,frame:true,labelSeparator:,labelWidth:30,labelAlign:right,items:new Ext.form.Radio(name : sex,/名字相同的单选框会作为一组fieldLabel:性别,boxLabel : 男),new Ext.form.Radio(name : sex,/名字相同的单选框会作为一组fieldLabel:性别,boxLabel : 女),new Ext.form.Checkbox(name : swim,fieldLabel:爱好,boxLabel : 游泳),new Ext.form.Checkbox(name : walk,fieldLabel:爱好,boxLabel : 散步););示例八：横排显示Ext.form.Checkbox和Ext.form.RadioExt.onReady(function()Ext.QuickTips.init();var form = new Ext.FormPanel(renderTo:form,title:表单Panel,width:300,height:300,frame:true,labelSeparator:,labelWidth:30,items:layout:column,width:150,items:new Ext.form.Label(text:性别：),new Ext.form.Radio(columnWidth:.5,name : sex,/名字相同的单选框会作为一组boxLabel : 男),new Ext.form.Radio(columnWidth:.5,name : sex,/名字相同的单选框会作为一组boxLabel : 女),layout:column,width:150,items:new Ext.form.Label(text:爱好：),new Ext.form.Checkbox(columnWidth:.5,name : swim,boxLabel : 游泳),new Ext.form.Checkbox(columnWidth:.5,name : walk,boxLabel : 散步););TriggerField说明：它提供了一个触发的事件onTriggerClick，datefield和combox都是继承它示例九：TriggerField示例Ext.onReady(function()Ext.QuickTips.init();var form = new Ext.form.FormPanel(renderTo:form,title:表单Panel,frame : true,width:300,height:300,labelSeparator :：,/分隔符labelWidth : 80,/标签宽度items:new Ext.form.TriggerField(id:city,fieldLabel:城市,onTriggerClick:function() var city = form.findById(city);););示例十：ComboBox示例Ext.onReady(function()Ext.QuickTips.init();var store = new Ext.data.SimpleStore(fields:chinese,english,data:北京,beijing,上海,shanghai,广州,guangzhou);var form = new Ext.FormPanel(renderTo:form,title:表单Panel,width:300,height:300,frame:true,labelSeparator:,labelWidth:30,items:new Ext.form.ComboBox(id:city,fieldLabel:城市,triggerAction:all,store:store,displayField:chinese,valueField:english,mode:local););forceSelection : true, 要求输入值必须在列表中存在resizable : true, 允许改变下拉列表的大小typeAhead : true, 允许自动选择匹配的剩余部分文本value:beijing, 默认选择北京emptyText:请选择一个城市/为空时显示文本示例十一：ComboBox中获得value值。Ext.onReady(function()Ext.QuickTips.init();var store = new Ext.data.SimpleStore(fields:chinese,english,data:北京,beijing,上海,shanghai,广州,guangzhou);var form = new Ext.FormPanel(renderTo:form,title:表单Panel,width:300,height:300,frame:true,labelSeparator:,labelWidth:30,items:new Ext.form.ComboBox(id:city,fieldLabel:城市,triggerAction:all,store:store,displayField:chinese,valueField:english,mode:local,forceSelection : true,/要求输入值必须在列表中存在resizable : true,typeAhead : true,emptyText:请选择一个城市.,listeners:select:function() Ext.MessageBox.alert(城市,选择的城市是 + Ext.get(c