from组件详解上

一、大文本域和getValues方法

 

代码如下：

Ext.onReady(function(){

       varmyform=Ext.create("Ext.form.Panel",{

              title:"form中文本框大文本域实例",

              bodyStyle:"padding:55 5 5",

              frame:true,

              width:400,

              height:300,

              id:"my_form",

              renderTo:"formDemo",

              defaultType:"textfield",

              defaults:{

                     labelSeparator:":",

                     labelAlign:"left",

                     labelWidth:50,

                     width:200,

                     allowBlank:false,//是否能为空

                     msgTarget:"side"//提示信息现在的位置

              },

              items:[{

                     fieldLabel:"Name",

                     name:"userName",

                     id:"userName",

                     selectOnFocus:true,

                     grow:false

              },{  //指定文本域

                     xtype:"textareafield",

                     width:300,

                     height:150,

                     name:"info",

                     fieldLabel:"Info"

              }],

              buttons:[

                     {text:'登录系统',handler:function(b){

                            varformObj=Ext.getCmp("my_form");

                            varbasic=formObj.getForm();

                            alert(Ext.JSON.encode(basic.getValues()));  //利用getValues方法得到表单中的所有值的对象

                     }}

              ]

       });

      

      

});

二、数字框

 

代码如下：

Ext.onReady(function(){

       varmyform=Ext.create("Ext.form.Panel",{

              title:"form中文本框大文本域实例",

              bodyStyle:"padding:55 5 5",

              frame:true,

              width:400,

              height:300,

              id:"my_form",

              renderTo:"formDemo",

              defaultType:"numberfield",

              defaults:{

                     labelSeparator:":",

                     labelAlign:"left",

                     labelWidth:70,

                     width:150,

                     allowBlank:false,//是否能为空

                     msgTarget:"side"//提示信息现在的位置

              },

              items:[{

                     fieldLabel:"整数微调",

                     allowDecimals:false,//禁止输入小数，必须是十进制数

                     name:"num1",

                     id:"num1"

              },{

                     fieldLabel:"整数",

                     allowDecimals:false,

                     name:"num2",

                     id:"num2",

                     hideTrigger:true  //隐藏微调按钮

              },{

                     fieldLabel:"小数",

                     name:"num3",

                     id:"num3",

                     emptyText:"请输入小数",//提示信息

                     hideTrigger:false,  //隐藏微调按钮

                     decimalPrecision:3  //四舍五入的位数

              },{

                     fieldLabel:"定界小数",

                     name:"num4",

                     id:"num4",

                     minValue:10,

                     maxValue:100,

                     emptyText:"请输入小数",//提示信息

                     hideTrigger:false,  //隐藏微调按钮

                     decimalPrecision:3  //四舍五入的位数

              },{

                     fieldLabel:"输入限定",

                     name:"num5",

                     id:"num5",

                     baseChars:"01",  //限定的字符

                     hideTrigger:false  //隐藏微调按钮

              },{

                     fieldLabel:"限定步长",

                     name:"num6",

                     id:"num6",

                     step:0.8,  //指定步长

                     emptyText:"请输入小数",//提示信息

                     hideTrigger:false,  //隐藏微调按钮

                     decimalPrecision:3,  //四舍五入的位数

                     value:20//默认值

              },{

                     fieldLabel:"只读字段",

                     name:"num7",

                     id:"num7",

                     hideTrigger:true,  //隐藏微调按钮

                     value:20,//默认值

                     //readOnly:true,//设置只读

                     disabled:true  //禁用

              }],

              buttons:[

                     {text:'登录系统',handler:function(b){

                            varformObj=Ext.getCmp("my_form");

                            varbasic=formObj.getForm();

                            alert(Ext.JSON.encode(basic.getValues()));  //利用getValues方法得到表单中的所有值的对象

                     }}

              ]

       });

      

      

});

三、多选框CheckBox和选择按钮Radio

 

代码如下：

Ext.onReady(function(){

       varmyform=Ext.create("Ext.form.Panel",{

              title:"form中文本框选框实例",

              bodyStyle:"padding:55 5 5",

              frame:true,

              width:400,

              height:300,

              id:"my_form",

              renderTo:"formDemo",

              defaults:{

                     labelSeparator:":",

                     labelAlign:"left",

                     labelWidth:50,

                     width:200,

                     allowBlank:false,//是否能为空

                     msgTarget:"side"//提示信息现在的位置

              },

              items:[{

                     xtype:"radiogroup",

                     fieldLabel:"性别",

                     columns:2,

                     items:[{

                            xtype:"radiofield",

                            boxLabel:"男",//指定box的label

                            inputValue:"m",

                            checked:true,

                            name:"sex"

                     },{

                            xtype:"radiofield",

                            boxLabel:"女",//指定box的label

                            inputValue:"w",

                            name:"sex"

                     }]

              },{

                     xtype:"checkboxgroup",

                     fieldLabel:"爱好",

                     columns:3,

                     items:[{

                            xtype:"checkboxfield",

                            inputValue:"1",

                            name:"hobby",

                            boxLabel:"唱歌"

                     },{

                            xtype:"checkboxfield",

                            inputValue:"2",

                            name:"hobby",

                            boxLabel:"看书"

                     },{

                            xtype:"checkboxfield",

                            inputValue:"3",

                            name:"hobby",

                            boxLabel:"编程"

                     }]

              }],

              dockedItems:[{

                     xtype:"toolbar",

                     dock:"top",

                     items:[{

                            text:"选择全部爱好",

                            handler:function(){

                                   varformObj=Ext.getCmp("my_form");

                                   varbasic=formObj.getForm();

                                   varfields=basic.getFields();

                                   fields.each(function(field){

                                          if("hobby"== field.getName()){

                                                 field.setValue(true);

                                          }

                                   });

                            }

                     }]

              }],

              buttons:[

                     {text:'登录系统',handler:function(b){

                            varformObj=Ext.getCmp("my_form");

                            varbasic=formObj.getForm();

                            alert(Ext.JSON.encode(basic.getValues()));  //利用getValues方法得到表单中的所有值的对象

                     }}

              ]

       });

});

四、Trigger 触发器字段

 

代码如下：

Ext.onReady(function(){

       varmyform=Ext.create("Ext.form.Panel",{

              title:"form中文本框触发器实例",

              bodyStyle:"padding:55 5 5",

              frame:true,

              width:400,

              height:300,

              id:"my_form",

              renderTo:"formDemo",

              defaults:{

                     labelSeparator:":",

                     labelAlign:"left",

                     labelWidth:50,

                     width:200,

                     allowBlank:false,//是否能为空

                     msgTarget:"side"//提示信息现在的位置

              },

              items:[{

                     xtype:"triggerfield",

                     fieldLabel:"Name",

                     name:"userName",

                     id:"userName",

                     //复写它的一个函数

                     onTriggerClick:function(e){//触发点击事件

                            varformObj=Ext.getCmp("my_form");

                            varbasic=formObj.getForm();

                            alert(Ext.JSON.encode(basic.getValues()));  //利用getValues

                     }

              }]

       });

});