Html代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. <HTML>  
  3.  <HEAD>  
  4.   <TITLE>提示信息</TITLE>  
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  6.   <link rel="stylesheet" type="text/css" href="javascript:void(0)" />  
  7.   <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>  
  8.   <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>  
  9.   <script type="text/javascript">  
  10.     Ext.onReady(function(){   
  11.         Ext.QuickTips.init();//初始化信息提示功能   
  12.         var form = new Ext.form.Panel({   
  13.             title:'表单',//表单标题   
  14.             height:120,//表单高度   
  15.             width:200,//表单宽度   
  16.             frame:true,//是否渲染表单   
  17.             renderTo :'form',   
  18.             defaults:{//统一设置表单字段默认属性   
  19.                 //autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度   
  20.                 labelSeparator :'：',//分隔符   
  21.                 labelWidth : 50,//标签宽度   
  22.                 width : 150,//字段宽度   
  23.                 allowBlank : false,//是否允许为空   
  24.                 blankText : '不允许为空',   
  25.                 labelAlign : 'left',//标签对齐方式   
  26.                 msgTarget :'qtip'          //显示一个浮动的提示信息   
  27.                 //msgTarget :'title'       //显示一个浏览器原始的浮动提示信息   
  28.                 //msgTarget :'under'       //在字段下方显示一个提示信息   
  29.                 //msgTarget :'side'        //在字段的右边显示一个提示信息   
  30.                 //msgTarget :'none'        //不显示提示信息   
  31.                 //msgTarget :'errorMsg'    //在errorMsg元素内显示提示信息   
  32.             },   
  33.             items:[{   
  34.                 xtype : 'textfield',   
  35.                 fieldLabel : '姓名'//标签内容   
  36.             },{   
  37.                 xtype : 'numberfield',   
  38.                 fieldLabel : '年龄'   
  39.             }]   
  40.         });   
  41.     });   
  42.   </script>  
  43.  </HEAD>  
  44.  <BODY STYLE="margin: 10px">  
  45.     <div id='form'></div>  
  46.     <!-- 错误信息展示元素 -->  
  47.     <div id='errorMsg'></div>  
  48.  </BODY>  
  49. </HTML>   
<HTML>
 <HEAD>
  <TITLE>提示信息</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="javascript:void(0)" />
  <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
  Ext.onReady(function(){
    Ext.QuickTips.init();//初始化信息提示功能
    var form = new Ext.form.Panel({
      title:'表单',//表单标题
      height:120,//表单高度
      width:200,//表单宽度
      frame:true,//是否渲染表单
      renderTo :'form',
      defaults:{//统一设置表单字段默认属性
        //autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度
        labelSeparator :'：',//分隔符
        labelWidth : 50,//标签宽度
        width : 150,//字段宽度
        allowBlank : false,//是否允许为空
        blankText : '不允许为空',
        labelAlign : 'left',//标签对齐方式
        msgTarget :'qtip'          //显示一个浮动的提示信息
        //msgTarget :'title'       //显示一个浏览器原始的浮动提示信息
        //msgTarget :'under'       //在字段下方显示一个提示信息
        //msgTarget :'side'        //在字段的右边显示一个提示信息
        //msgTarget :'none'        //不显示提示信息
        //msgTarget :'errorMsg'    //在errorMsg元素内显示提示信息
      },
      items:[{
        xtype : 'textfield',
        fieldLabel : '姓名'//标签内容
      },{
        xtype : 'numberfield',
        fieldLabel : '年龄'
      }]
    });
  });
  </script>
 </HEAD>
 <BODY STYLE="margin: 10px">
  <div id='form'></div>
  <!-- 错误信息展示元素 -->
  <div id='errorMsg'></div>
 </BODY>
</HTML>


 




Html代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. <div id='form'></div>  
<div id='form'></div>


 




Javascript代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. Ext.QuickTips.init();   
  3.         var loginForm = Ext.create('Ext.form.Panel',{   
  4.             title:'Ext.form.field.Text示例',   
  5.             bodyStyle:'padding:5 5 5 5',//表单边距   
  6.             frame : true,   
  7.             height:120,   
  8.             width:200,   
  9.             renderTo :'form',   
  10.             defaultType: 'textfield',//设置表单字段的默认类型   
  11.             defaults:{//统一设置表单字段默认属性   
  12.                 labelSeparator :'：',//分隔符   
  13.                 labelWidth : 50,//标签宽度   
  14.                 width : 150,//字段宽度   
  15.                 allowBlank : false,//是否允许为空   
  16.                 labelAlign : 'left',//标签对齐方式   
  17.                 msgTarget :'side'   //在字段的右边显示一个提示信息   
  18.             },   
  19.             items:[{   
  20.                     fieldLabel : '用户名',   
  21.                     name : 'userName',   
  22.                     selectOnFocus : true,//得到焦点时自动选择文本   
  23.                     //验证电子邮件格式的正则表达式   
  24.                     regex : /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,   
  25.                     regexText:'格式错误'//验证错误之后的提示信息,   
  26.                 },{   
  27.                     name : 'password',   
  28.                     fieldLabel : '密码',   
  29.                     inputType : 'password'//设置输入类型为password   
  30.                 }   
  31.             ],   
  32.             buttons:[{   
  33.                 text : '登陆',   
  34.                 handler : function(){   
  35.                     loginForm.form.setValues({userName:'user@com',password:'123456'});   
  36.                 }   
  37.             }]   
  38.         });  
Ext.QuickTips.init();
    var loginForm = Ext.create('Ext.form.Panel',{
      title:'Ext.form.field.Text示例',
      bodyStyle:'padding:5 5 5 5',//表单边距
      frame : true,
      height:120,
      width:200,
      renderTo :'form',
      defaultType: 'textfield',//设置表单字段的默认类型
      defaults:{//统一设置表单字段默认属性
        labelSeparator :'：',//分隔符
        labelWidth : 50,//标签宽度
        width : 150,//字段宽度
        allowBlank : false,//是否允许为空
        labelAlign : 'left',//标签对齐方式
        msgTarget :'side'   //在字段的右边显示一个提示信息
      },
      items:[{
          fieldLabel : '用户名',
          name : 'userName',
          selectOnFocus : true,//得到焦点时自动选择文本
          //验证电子邮件格式的正则表达式
          regex : /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,
          regexText:'格式错误'//验证错误之后的提示信息,
        },{
          name : 'password',
          fieldLabel : '密码',
          inputType : 'password'//设置输入类型为password
        }
      ],
      buttons:[{
        text : '登陆',
        handler : function(){
          loginForm.form.setValues({userName:'user@com',password:'123456'});
        }
      }]
    });


 




Javascript代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. Ext.QuickTips.init();   
  3.         var testForm = Ext.create('Ext.form.Panel',{   
  4.             title:'Ext.form.field.TextArea示例',   
  5.             bodyStyle:'padding:5 5 5 5',//表单边距   
  6.             frame : true,   
  7.             height:150,   
  8.             width:250,   
  9.             renderTo :'form',  //<div id='form'></div>   
  10.             items:[{   
  11.                 xtype : 'textarea',   
  12.                 fieldLabel : '备注',   
  13.                 id:'memo',//字段组件id   
  14.                 labelSeparator :'：',//分隔符   
  15.                 labelWidth : 60,//标签宽度   
  16.                 width:200   
  17.             }],   
  18.             buttons:[{text:'确定',handler:showValue}]   
  19.         })   
  20.         function showValue(){   
  21.             var memo = testForm.getForm().findField('memo');//取得输入控件   
  22.             alert(memo.getValue());//取得控件值   
  23.         }  
Ext.QuickTips.init();
    var testForm = Ext.create('Ext.form.Panel',{
      title:'Ext.form.field.TextArea示例',
      bodyStyle:'padding:5 5 5 5',//表单边距
      frame : true,
      height:150,
      width:250,
      renderTo :'form',  //<div id='form'></div>
      items:[{
        xtype : 'textarea',
        fieldLabel : '备注',
        id:'memo',//字段组件id
        labelSeparator :'：',//分隔符
        labelWidth : 60,//标签宽度
        width:200
      }],
      buttons:[{text:'确定',handler:showValue}]
    })
    function showValue(){
      var memo = testForm.getForm().findField('memo');//取得输入控件
      alert(memo.getValue());//取得控件值
    }


 




Javascript代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. //Ext.form.field.Number示例   
  3.         Ext.QuickTips.init();   
  4.         var form = Ext.create('Ext.form.FormPanel',{   
  5.             title:'Ext.form.field.Number示例',   
  6.             bodyStyle:'padding:5 5 5 5',//表单边距   
  7.             renderTo :'form',   //<div id='form'></div>   
  8.             frame : true,   
  9.             height:150,   
  10.             width:250,   
  11.             defaultType: 'numberfield',//设置表单字段的默认类型   
  12.             defaults:{//统一设置表单字段默认属性   
  13.                 labelSeparator :'：',//分隔符   
  14.                 labelWidth : 80,//标签宽度   
  15.                 width : 200,//字段宽度   
  16.                 labelAlign : 'left',//标签对齐方式   
  17.                 msgTarget :'side'   //在字段的右边显示一个提示信息   
  18.             },   
  19.             items:[{   
  20.                 fieldLabel:'整数',   
  21.                 hideTrigger : true,//隐藏微调按钮   
  22.                 allowDecimals : false,//不允许输入小数   
  23.                 nanText :'请输入有效的整数'//无效数字提示   
  24.             },{   
  25.                 fieldLabel:'小数',   
  26.                 decimalPrecision : 2,//精确到小数点后两位   
  27.                 allowDecimals : true,//允许输入小数   
  28.                 nanText :'请输入有效的小数'//无效数字提示   
  29.             },{   
  30.                 fieldLabel:'数字限制',   
  31.                 baseChars :'12345'//输入数字范围   
  32.             },{   
  33.                 fieldLabel:'数值限制',   
  34.                 maxValue : 100,//最大值   
  35.                 minValue : 50//最小值   
  36.             }]   
  37.         });  
//Ext.form.field.Number示例
    Ext.QuickTips.init();
    var form = Ext.create('Ext.form.FormPanel',{
      title:'Ext.form.field.Number示例',
      bodyStyle:'padding:5 5 5 5',//表单边距
      renderTo :'form', //<div id='form'></div>
      frame : true,
      height:150,
      width:250,
      defaultType: 'numberfield',//设置表单字段的默认类型
      defaults:{//统一设置表单字段默认属性
        labelSeparator :'：',//分隔符
        labelWidth : 80,//标签宽度
        width : 200,//字段宽度
        labelAlign : 'left',//标签对齐方式
        msgTarget :'side'   //在字段的右边显示一个提示信息
      },
      items:[{
        fieldLabel:'整数',
        hideTrigger : true,//隐藏微调按钮
        allowDecimals : false,//不允许输入小数
        nanText :'请输入有效的整数'//无效数字提示
      },{
        fieldLabel:'小数',
        decimalPrecision : 2,//精确到小数点后两位
        allowDecimals : true,//允许输入小数
        nanText :'请输入有效的小数'//无效数字提示
      },{
        fieldLabel:'数字限制',
        baseChars :'12345'//输入数字范围
      },{
        fieldLabel:'数值限制',
        maxValue : 100,//最大值
        minValue : 50//最小值
      }]
    });


触发字段：




Javascript代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. //Ext.form.field.Trigger示例   
  3.         var testForm = Ext.create('Ext.form.Panel',{   
  4.             title:'Ext.form.field.Trigger示例',   
  5.             bodyStyle:'padding:5 5 5 5',//表单边距   
  6.             frame : true,   
  7.             height:100,   
  8.             width:270,   
  9.             renderTo :'form',   
  10.             defaults:{//统一设置表单字段默认属性   
  11.                 labelSeparator :'：',//分隔符   
  12.                 labelWidth : 70,//标签宽度   
  13.                 width : 200,//字段宽度   
  14.                 labelAlign : 'left'//标签对齐方式   
  15.             },   
  16.             items:[{   
  17.                 xtype : 'triggerfield',   
  18.                 id:'memo',   
  19.                 fieldLabel:'触发字段',   
  20.                 hideTrigger : false,//不隐藏触发按钮   
  21.                 onTriggerClick : function(){   
  22.                     var memo = testForm.getForm().findField('memo');//取得输入控件   
  23.                     alert(memo.getValue());//取得控件值   
  24.                     Ext.getCmp('memo').setValue('test');   
  25.                 }   
  26.             }]   
  27.         });  
//Ext.form.field.Trigger示例
    var testForm = Ext.create('Ext.form.Panel',{
      title:'Ext.form.field.Trigger示例',
      bodyStyle:'padding:5 5 5 5',//表单边距
      frame : true,
      height:100,
      width:270,
      renderTo :'form',
      defaults:{//统一设置表单字段默认属性
        labelSeparator :'：',//分隔符
        labelWidth : 70,//标签宽度
        width : 200,//字段宽度
        labelAlign : 'left'//标签对齐方式
      },
      items:[{
        xtype : 'triggerfield',
        id:'memo',
        fieldLabel:'触发字段',
        hideTrigger : false,//不隐藏触发按钮
        onTriggerClick : function(){
          var memo = testForm.getForm().findField('memo');//取得输入控件
          alert(memo.getValue());//取得控件值
          Ext.getCmp('memo').setValue('test');
        }
      }]
    });


微调字段




Javascript代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. //Ext.form.field.Spinner示例   
  3.         Ext.create('Ext.form.Panel',{   
  4.             title:'Ext.form.field.Spinner示例',   
  5.             bodyStyle:'padding:5 5 5 5',//表单边距   
  6.             frame : true,   
  7.             height:70,   
  8.             width:250,   
  9.             renderTo :'form',   
  10.             defaults:{//统一设置表单字段默认属性   
  11.                 labelSeparator :'：',//分隔符   
  12.                 labelWidth : 70,//标签宽度   
  13.                 width : 200,//字段宽度   
  14.                 labelAlign : 'left'//标签对齐方式   
  15.             },   
  16.             items:[{   
  17.                 xtype : 'spinnerfield',   
  18.                 fieldLabel:'微调字段',   
  19.                 id : 'salary',//组件id   
  20.                 value : 100,//初始化字段值   
  21.                 onSpinUp : function(){   
  22.                     var salaryCmp = Ext.getCmp('salary');//通过组件id获取组件对象   
  23.                     //增加默认值   
  24.                     salaryCmp.setValue(Number(salaryCmp.getValue()) + 1);   
  25.                 },   
  26.                 onSpinDown : function(){   
  27.                     var salaryCmp = Ext.getCmp('salary');   
  28.                     //减小默认值   
  29.                     salaryCmp.setValue(Number(salaryCmp.getValue()) - 1);   
  30.                 }   
  31.             }]   
  32.         });  
//Ext.form.field.Spinner示例
    Ext.create('Ext.form.Panel',{
      title:'Ext.form.field.Spinner示例',
      bodyStyle:'padding:5 5 5 5',//表单边距
      frame : true,
      height:70,
      width:250,
      renderTo :'form',
      defaults:{//统一设置表单字段默认属性
        labelSeparator :'：',//分隔符
        labelWidth : 70,//标签宽度
        width : 200,//字段宽度
        labelAlign : 'left'//标签对齐方式
      },
      items:[{
        xtype : 'spinnerfield',
        fieldLabel:'微调字段',
        id : 'salary',//组件id
        value : 100,//初始化字段值
        onSpinUp : function(){
          var salaryCmp = Ext.getCmp('salary');//通过组件id获取组件对象
          //增加默认值
          salaryCmp.setValue(Number(salaryCmp.getValue()) + 1);
        },
        onSpinDown : function(){
          var salaryCmp = Ext.getCmp('salary');
          //减小默认值
          salaryCmp.setValue(Number(salaryCmp.getValue()) - 1);
        }
      }]
    });


ComboBox本地数据源示例




Javascript代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. //Ext.form.field.ComboBox本地数据源示例   
  3.         //创建数据模型   
  4.         Ext.regModel('PostInfo', {   
  5.             fields: [{name: 'province'},{name: 'post'}]   
  6.         });   
  7.         //定义组合框中显示的数据源   
  8.         var postStore = Ext.create('Ext.data.Store',{   
  9.             model : 'PostInfo',   
  10.             data : [   
  11.                 {province:'北京',post:'100000'},   
  12.                 {province:'通县',post:'101100'},   
  13.                 {province:'昌平',post:'102200'},   
  14.                 {province:'大兴',post:'102600'},   
  15.                 {province:'密云',post:'101500'},   
  16.                 {province:'延庆',post:'102100'},   
  17.                 {province:'顺义',post:'101300'},   
  18.                 {province:'怀柔',post:'101400'}   
  19.             ]   
  20.         });   
  21.         //创建表单   
  22.         Ext.create('Ext.form.Panel',{   
  23.             title:'Ext.form.field.ComboBox本地数据源示例',   
  24.             renderTo: Ext.getBody(),   
  25.             bodyPadding: 5,   
  26.             frame : true,   
  27.             height:100,   
  28.             width:270,   
  29.             defaults:{//统一设置表单字段默认属性   
  30.                 labelSeparator :'：',//分隔符   
  31.                 labelWidth : 70,//标签宽度   
  32.                 width : 200,//字段宽度   
  33.                 labelAlign : 'left'//标签对齐方式   
  34.             },   
  35.             items:[{   
  36.                 xtype : 'combo',   
  37.                 listConfig : {   
  38.                     emptyText : '未找到匹配值',//当值不在列表是的提示信息   
  39.                     maxHeight : 60//设置下拉列表的最大高度为60像素   
  40.                 },   
  41.                 name:'post',   
  42.                 autoSelect : true,   
  43.                 fieldLabel:'邮政编码',   
  44.                 triggerAction: 'all',//单击触发按钮显示全部数据   
  45.                 store : postStore,//设置数据源   
  46.                 displayField:'province',//定义要显示的字段   
  47.                 valueField:'post',//定义值字段   
  48.                 queryMode: 'local',//本地模式   
  49.                 forceSelection : true,//要求输入值必须在列表中存在   
  50.                 typeAhead : true,//允许自动选择匹配的剩余部分文本   
  51.                 value:'102600'//默认选择大兴   
  52.             }]   
  53.         });  
//Ext.form.field.ComboBox本地数据源示例
    //创建数据模型
    Ext.regModel('PostInfo', {
        fields: [{name: 'province'},{name: 'post'}]
    });
    //定义组合框中显示的数据源
    var postStore = Ext.create('Ext.data.Store',{
      model : 'PostInfo',
      data : [
        {province:'北京',post:'100000'},
        {province:'通县',post:'101100'},
        {province:'昌平',post:'102200'},
        {province:'大兴',post:'102600'},
        {province:'密云',post:'101500'},
        {province:'延庆',post:'102100'},
        {province:'顺义',post:'101300'},
        {province:'怀柔',post:'101400'}
      ]
    });
    //创建表单
    Ext.create('Ext.form.Panel',{
      title:'Ext.form.field.ComboBox本地数据源示例',
      renderTo: Ext.getBody(),
      bodyPadding: 5,
      frame : true,
      height:100,
      width:270,
      defaults:{//统一设置表单字段默认属性
        labelSeparator :'：',//分隔符
        labelWidth : 70,//标签宽度
        width : 200,//字段宽度
        labelAlign : 'left'//标签对齐方式
      },
      items:[{
        xtype : 'combo',
        listConfig : {
          emptyText : '未找到匹配值',//当值不在列表是的提示信息
          maxHeight : 60//设置下拉列表的最大高度为60像素
        },
        name:'post',
        autoSelect : true,
        fieldLabel:'邮政编码',
        triggerAction: 'all',//单击触发按钮显示全部数据
        store : postStore,//设置数据源
        displayField:'province',//定义要显示的字段
        valueField:'post',//定义值字段
        queryMode: 'local',//本地模式
        forceSelection : true,//要求输入值必须在列表中存在
        typeAhead : true,//允许自动选择匹配的剩余部分文本
        value:'102600'//默认选择大兴
      }]
    });


Ext.form.field.Time示例：




Javascript代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. Ext.create('Ext.form.Panel',{   
  3.             title:'Ext.form.field.Time示例',   
  4.             renderTo: Ext.getBody(),   
  5.             bodyPadding: 5,   
  6.             frame : true,   
  7.             height:100,   
  8.             width:300,   
  9.             items:[{   
  10.                 fieldLabel:'时间选择框',   
  11.                 xtype : 'timefield',   
  12.                 width : 220,   
  13.                 labelSeparator :'：',//分隔符   
  14.                 msgTarget :'side',//在字段的右边显示一个提示信息   
  15.                 autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度   
  16.                 maxValue : '18:00',//最大时间   
  17.                 maxText : '时间应小于{0}',//大于最大时间的提示信息   
  18.                 minValue : '10:00',//最小时间   
  19.                 minText : '时间应大于{0}',//小于最小时间的提示信息   
  20.                 pickerMaxHeight : 70,//下拉列表的最大高度   
  21.                 increment : 60,//时间间隔为60分钟   
  22.                 format : 'G时i分s秒 ',//G标示为24时计时法   
  23.                 invalidText :'时间格式无效'  
  24.             }]   
  25.         });  
Ext.create('Ext.form.Panel',{
      title:'Ext.form.field.Time示例',
      renderTo: Ext.getBody(),
      bodyPadding: 5,
      frame : true,
      height:100,
      width:300,
      items:[{
        fieldLabel:'时间选择框',
        xtype : 'timefield',
        width : 220,
        labelSeparator :'：',//分隔符
        msgTarget :'side',//在字段的右边显示一个提示信息
        autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度
        maxValue : '18:00',//最大时间
        maxText : '时间应小于{0}',//大于最大时间的提示信息
        minValue : '10:00',//最小时间
        minText : '时间应大于{0}',//小于最小时间的提示信息
        pickerMaxHeight : 70,//下拉列表的最大高度
        increment : 60,//时间间隔为60分钟
        format : 'G时i分s秒 ',//G标示为24时计时法
        invalidText :'时间格式无效'
      }]
    });


Ext.form.field.Date示例：




Javascript代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. Ext.create('Ext.form.Panel',{   
  3.             title:'Ext.form.field.Time示例',   
  4.             renderTo: Ext.getBody(),   
  5.             bodyPadding: 5,   
  6.             frame : true,   
  7.             height:100,   
  8.             width:300,   
  9.             items:[{   
  10.                 fieldLabel:'时间选择框',   
  11.                 xtype : 'timefield',   
  12.                 width : 220,   
  13.                 labelSeparator :'：',//分隔符   
  14.                 msgTarget :'side',//在字段的右边显示一个提示信息   
  15.                 autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度   
  16.                 maxValue : '18:00',//最大时间   
  17.                 maxText : '时间应小于{0}',//大于最大时间的提示信息   
  18.                 minValue : '10:00',//最小时间   
  19.                 minText : '时间应大于{0}',//小于最小时间的提示信息   
  20.                 pickerMaxHeight : 70,//下拉列表的最大高度   
  21.                 increment : 60,//时间间隔为60分钟   
  22.                 format : 'G时i分s秒 ',//G标示为24时计时法   
  23.                 invalidText :'时间格式无效'  
  24.             }]   
  25.         });  
Ext.create('Ext.form.Panel',{
      title:'Ext.form.field.Time示例',
      renderTo: Ext.getBody(),
      bodyPadding: 5,
      frame : true,
      height:100,
      width:300,
      items:[{
        fieldLabel:'时间选择框',
        xtype : 'timefield',
        width : 220,
        labelSeparator :'：',//分隔符
        msgTarget :'side',//在字段的右边显示一个提示信息
        autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度
        maxValue : '18:00',//最大时间
        maxText : '时间应小于{0}',//大于最大时间的提示信息
        minValue : '10:00',//最小时间
        minText : '时间应大于{0}',//小于最小时间的提示信息
        pickerMaxHeight : 70,//下拉列表的最大高度
        increment : 60,//时间间隔为60分钟
        format : 'G时i分s秒 ',//G标示为24时计时法
        invalidText :'时间格式无效'
      }]
    });


Ext.form.field.Hidden示例：




Javascript代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. Ext.create('Ext.form.Panel',{   
  3.             title:'Ext.form.field.Hidden示例',   
  4.             frame : true,   
  5.             height:100,   
  6.             width:300,   
  7.             renderTo: Ext.getBody(),   
  8.             bodyPadding: 5,   
  9.             defaultType: 'textfield',//设置表单字段的默认类型   
  10.             defaults:{//统一设置表单字段默认属性   
  11.                 labelSeparator :'：',//分隔符   
  12.                 labelWidth : 70,//标签宽度   
  13.                 width : 200,//字段宽度   
  14.                 labelAlign : 'left'//标签对齐方式   
  15.             },   
  16.             items:[{   
  17.                 name:'userName',   
  18.                 fieldLabel:'姓名'  
  19.             },{//隐藏域   
  20.                 name:'age',   
  21.                 xtype : 'hidden'  
  22.             },{   
  23.                 name:'sex',   
  24.                 fieldLabel:'性别'  
  25.             }]   
  26.         });  
Ext.create('Ext.form.Panel',{
      title:'Ext.form.field.Hidden示例',
      frame : true,
      height:100,
      width:300,
      renderTo: Ext.getBody(),
      bodyPadding: 5,
      defaultType: 'textfield',//设置表单字段的默认类型
      defaults:{//统一设置表单字段默认属性
        labelSeparator :'：',//分隔符
        labelWidth : 70,//标签宽度
        width : 200,//字段宽度
        labelAlign : 'left'//标签对齐方式
      },
      items:[{
        name:'userName',
        fieldLabel:'姓名'
      },{//隐藏域
        name:'age',
        xtype : 'hidden'
      },{
        name:'sex',
        fieldLabel:'性别'
      }]
    });


Ext.form.field.HtmlEditor示例：




Javascript代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. Ext.create('Ext.form.Panel',{   
  3.             title:'Ext.form.field.HtmlEditor示例',   
  4.             width : 630,   
  5.             frame : true,   
  6.             renderTo: Ext.getBody(),   
  7.             bodyPadding: 5,   
  8.             items:[{   
  9.                 fieldLabel:'HTML字段',   
  10.                 xtype : 'htmleditor',   
  11.                 height:150,   
  12.                 width : 600,   
  13.                 value : 'ExtJS4登场',   
  14.                 labelWidth : 70,//标签宽度   
  15.                 labelSeparator :'：',//分隔符   
  16.                 createLinkText : '创建超链接',//创建连接的提示信息   
  17.                 defaultLinkValue : "http://www.",//连接的默认格式   
  18.                 enableAlignments : true,//起用左、中、右对齐按钮   
  19.                 enableColors : true,//起用前景色、背景色选择按钮   
  20.                 enableFont : true,//起用字体选择按钮   
  21.                 enableFontSize : true,//起用字体增大和缩写按钮   
  22.                 enableFormat : true,//起用粗体、斜体、下划线按钮   
  23.                 enableLinks : true,//起用创建连接按钮   
  24.                 enableLists : true,//起用列表按钮   
  25.                 enableSourceEdit : true,//起用源代码编辑按钮   
  26.                 fontFamilies:['宋体','隶书','黑体'],//字体列表   
  27.                 buttonTips :{   
  28.                     bold : {   
  29.                         title: 'Bold (Ctrl+B)',   
  30.                         text: '粗体'  
  31.                     },   
  32.                     italic : {   
  33.                         title: 'Italic (Ctrl+I)',   
  34.                         text: '斜体'  
  35.                     },   
  36.                     underline : {   
  37.                         title: 'Underline (Ctrl+U)',   
  38.                         text: '下划线'  
  39.                     },   
  40.                     increasefontsize : {   
  41.                         title: 'Grow Text',   
  42.                         text: '增大字体'  
  43.                     },   
  44.                     decreasefontsize : {   
  45.                         title: 'Shrink Text',   
  46.                         text: '缩小字体'  
  47.                     },   
  48.                     backcolor : {   
  49.                         title: 'Text Highlight Color',   
  50.                         text: '背景色'  
  51.                     },   
  52.                     forecolor : {   
  53.                         title: 'Font Color',   
  54.                         text: '前景色'  
  55.                     },   
  56.                     justifyleft : {   
  57.                         title: 'Align Text Left',   
  58.                         text: '左对齐'  
  59.                     },   
  60.                     justifycenter : {   
  61.                         title: 'Center Text',   
  62.                         text: '居中对齐'  
  63.                     },   
  64.                     justifyright : {   
  65.                         title: 'Align Text Right',   
  66.                         text: '右对齐'  
  67.                     },   
  68.                     insertunorderedlist : {   
  69.                         title: 'Bullet List',   
  70.                         text: '项目符号'  
  71.                     },   
  72.                     insertorderedlist : {   
  73.                         title: 'Numbered List',   
  74.                         text: '数字编号'  
  75.                     },   
  76.                     createlink : {   
  77.                         title: 'Hyperlink',   
  78.                         text: '超连接'  
  79.                     },   
  80.                     sourceedit : {   
  81.                         title: 'Source Edit',   
  82.                         text: '切换源代码编辑模式'  
  83.                     }   
  84.                 }   
  85.             }]   
  86.         });  
Ext.create('Ext.form.Panel',{
      title:'Ext.form.field.HtmlEditor示例',
      width : 630,
      frame : true,
      renderTo: Ext.getBody(),
      bodyPadding: 5,
      items:[{
        fieldLabel:'HTML字段',
        xtype : 'htmleditor',
        height:150,
        width : 600,
        value : 'ExtJS4登场',
        labelWidth : 70,//标签宽度
        labelSeparator :'：',//分隔符
        createLinkText : '创建超链接',//创建连接的提示信息
        defaultLinkValue : "http://www.",//连接的默认格式
        enableAlignments : true,//起用左、中、右对齐按钮
        enableColors : true,//起用前景色、背景色选择按钮
        enableFont : true,//起用字体选择按钮
        enableFontSize : true,//起用字体增大和缩写按钮
        enableFormat : true,//起用粗体、斜体、下划线按钮
        enableLinks : true,//起用创建连接按钮
        enableLists : true,//起用列表按钮
        enableSourceEdit : true,//起用源代码编辑按钮
        fontFamilies:['宋体','隶书','黑体'],//字体列表
        buttonTips :{
          bold : {
            title: 'Bold (Ctrl+B)',
            text: '粗体'
          },
          italic : {
            title: 'Italic (Ctrl+I)',
            text: '斜体'
          },
          underline : {
            title: 'Underline (Ctrl+U)',
            text: '下划线'
          },
          increasefontsize : {
            title: 'Grow Text',
            text: '增大字体'
          },
          decreasefontsize : {
            title: 'Shrink Text',
            text: '缩小字体'
          },
          backcolor : {
            title: 'Text Highlight Color',
            text: '背景色'
          },
          forecolor : {
            title: 'Font Color',
            text: '前景色'
          },
          justifyleft : {
            title: 'Align Text Left',
            text: '左对齐'
          },
          justifycenter : {
            title: 'Center Text',
            text: '居中对齐'
          },
          justifyright : {
            title: 'Align Text Right',
            text: '右对齐'
          },
          insertunorderedlist : {
            title: 'Bullet List',
            text: '项目符号'
          },
          insertorderedlist : {
            title: 'Numbered List',
            text: '数字编号'
          },
          createlink : {
            title: 'Hyperlink',
            text: '超连接'
          },
          sourceedit : {
            title: 'Source Edit',
            text: '切换源代码编辑模式'
          }
        }
      }]
    });


Ext.form.field.Display示例：




Javascript代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. Ext.create('Ext.form.Panel',{   
  3.             title:'Ext.form.field.Display示例',   
  4.             width : 200,   
  5.             frame : true,   
  6.             renderTo: Ext.getBody(),   
  7.             bodyPadding: 5,   
  8.             items:[{   
  9.                 fieldLabel:'展示字段',   
  10.                 xtype : 'displayfield',   
  11.                 value : '<b>ExtJS4登场</b>',   
  12.                 labelWidth : 70,//标签宽度   
  13.                 labelSeparator :'：'//分隔符   
  14.             }]   
  15.         });  
Ext.create('Ext.form.Panel',{
      title:'Ext.form.field.Display示例',
      width : 200,
      frame : true,
      renderTo: Ext.getBody(),
      bodyPadding: 5,
      items:[{
        fieldLabel:'展示字段',
        xtype : 'displayfield',
        value : '<b>ExtJS4登场</b>',
        labelWidth : 70,//标签宽度
        labelSeparator :'：'//分隔符
      }]
    });


Ext.form.Label示例：




Javascript代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. Ext.create('Ext.form.Panel',{   
  3.             title:'Ext.form.Label示例',   
  4.             width : 200,   
  5.             frame : true,   
  6.             renderTo: Ext.getBody(),   
  7.             bodyPadding: 5,   
  8.             items:[ {   
  9.                 xtype: 'label',   
  10.                 forId: 'userName',//关联inputId为userName的表单字段   
  11.                 text: '用户名'  
  12.             },{   
  13.                 name:'userName',   
  14.                 xtype : 'textfield',   
  15.                 inputId : 'userName',   
  16.                 hideLabel : true //隐藏字段标签   
  17.             }]   
  18.         });  
Ext.create('Ext.form.Panel',{
      title:'Ext.form.Label示例',
      width : 200,
      frame : true,
      renderTo: Ext.getBody(),
      bodyPadding: 5,
      items:[ {
            xtype: 'label',
            forId: 'userName',//关联inputId为userName的表单字段
            text: '用户名'
        },{
        name:'userName',
        xtype : 'textfield',
        inputId : 'userName',
        hideLabel : true //隐藏字段标签
      }]
    });


Ext.form.FieldSet示例：




Javascript代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. Ext.create('Ext.form.Panel',{   
  3.             title:'Ext.form.FieldSet示例',   
  4.             labelWidth : 40,//标签宽度   
  5.             width : 220,   
  6.             frame : true,   
  7.             renderTo: Ext.getBody(),   
  8.             bodyPadding: 5,   
  9.             items:[{   
  10.                 title:'产品信息',   
  11.                 xtype : 'fieldset',   
  12.                 collapsible : true,//显示切换展开收缩状态的切换按钮   
  13.                 bodyPadding: 5,   
  14.                 defaults:{//统一设置表单字段默认属性   
  15.                     labelSeparator :'：',//分隔符   
  16.                     labelWidth : 50,//标签宽度   
  17.                     width : 160//字段宽度   
  18.                 },   
  19.                 defaultType: 'textfield',//设置表单字段的默认类型   
  20.                 items:[{   
  21.                     fieldLabel:'产地'  
  22.                 },{   
  23.                     fieldLabel:'售价'  
  24.                 }]   
  25.             },{   
  26.                 title:'产品描述',   
  27.                 xtype : 'fieldset',   
  28.                 bodyPadding: 5,   
  29.                 checkboxToggle : true,//显示切换展开收缩状态的复选框   
  30.                 checkboxName : 'description',//提交数据时复选框对应的name   
  31.                 labelSeparator :'：',//分隔符   
  32.                 items:[{   
  33.                     fieldLabel:'简介',   
  34.                     labelSeparator :'：',//分隔符   
  35.                     labelWidth : 50,//标签宽度   
  36.                     width : 160,//字段宽度   
  37.                     xtype : 'textarea'  
  38.                 }]   
  39.             }]   
  40.         });  
Ext.create('Ext.form.Panel',{
      title:'Ext.form.FieldSet示例',
      labelWidth : 40,//标签宽度
      width : 220,
      frame : true,
      renderTo: Ext.getBody(),
      bodyPadding: 5,
      items:[{
        title:'产品信息',
        xtype : 'fieldset',
        collapsible : true,//显示切换展开收缩状态的切换按钮
        bodyPadding: 5,
        defaults:{//统一设置表单字段默认属性
          labelSeparator :'：',//分隔符
          labelWidth : 50,//标签宽度
          width : 160//字段宽度
        },
        defaultType: 'textfield',//设置表单字段的默认类型
        items:[{
          fieldLabel:'产地'
        },{
          fieldLabel:'售价'
        }]
      },{
        title:'产品描述',
        xtype : 'fieldset',
        bodyPadding: 5,
        checkboxToggle : true,//显示切换展开收缩状态的复选框
        checkboxName : 'description',//提交数据时复选框对应的name
        labelSeparator :'：',//分隔符
        items:[{
          fieldLabel:'简介',
          labelSeparator :'：',//分隔符
          labelWidth : 50,//标签宽度
          width : 160,//字段宽度
          xtype : 'textarea'
        }]
      }]
    });


Ext.form.FieldContainer示例：




Javascript代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. Ext.create('Ext.form.Panel',{   
  3.             title:'Ext.form.FieldContainer示例',   
  4.             width : 300,   
  5.             frame : true,   
  6.             renderTo: Ext.getBody(),   
  7.             bodyPadding: 5,   
  8.             fieldDefaults:{//统一设置表单字段默认属性   
  9.                 labelSeparator :'：',//分隔符   
  10.                 labelWidth : 60,//标签宽度   
  11.                 width : 260,//字段宽度   
  12.                 msgTarget : 'side'  
  13.             },   
  14.             defaultType: 'textfield',//设置表单字段的默认类型   
  15.             items:[{   
  16.                 fieldLabel:'商品名称'  
  17.             },{   
  18.                 xtype: 'fieldcontainer',   
  19.                 fieldLabel: '生产日期',   
  20.                 layout: {//设置容器字段布局   
  21.                     type: 'hbox',   
  22.                     align: 'middle'//垂直居中   
  23.                 },   
  24.                 combineErrors : true,//合并展示错误信息   
  25.                 fieldDefaults: {   
  26.                     hideLabel: true,//隐藏字段标签   
  27.                     allowBlank : false//设置字段值不允许为空   
  28.                 },   
  29.                 defaultType: 'textfield',//设置表单字段的默认类型   
  30.                 items: [{   
  31.                     fieldLabel: '年',   
  32.                     flex: 1,   
  33.                     inputId : 'yearId'  
  34.                 },{   
  35.                     xtype: 'label',   
  36.                     forId : 'yearId',   
  37.                     text: '年'  
  38.                 },{   
  39.                     fieldLabel: '月',   
  40.                     flex: 1,   
  41.                     inputId : 'monthId'  
  42.                 },{   
  43.                     xtype: 'label',   
  44.                     forId : 'monthId',   
  45.                     text: '月'  
  46.                 },{   
  47.                     fieldLabel: '日',   
  48.                     flex: 1,   
  49.                     inputId : 'dayId'  
  50.                 },{   
  51.                     xtype: 'label',   
  52.                     forId : 'dayId',   
  53.                     text: '日'  
  54.                 }]   
  55.             },{   
  56.                 fieldLabel:'产地来源'  
  57.             }]   
  58.         });  
Ext.create('Ext.form.Panel',{
      title:'Ext.form.FieldContainer示例',
      width : 300,
      frame : true,
      renderTo: Ext.getBody(),
      bodyPadding: 5,
      fieldDefaults:{//统一设置表单字段默认属性
        labelSeparator :'：',//分隔符
        labelWidth : 60,//标签宽度
        width : 260,//字段宽度
        msgTarget : 'side'
      },
      defaultType: 'textfield',//设置表单字段的默认类型
      items:[{
        fieldLabel:'商品名称'
      },{
            xtype: 'fieldcontainer',
            fieldLabel: '生产日期',
            layout: {//设置容器字段布局
                type: 'hbox',
                align: 'middle'//垂直居中
            },
            combineErrors : true,//合并展示错误信息
            fieldDefaults: {
                    hideLabel: true,//隐藏字段标签
                    allowBlank : false//设置字段值不允许为空
                },
                defaultType: 'textfield',//设置表单字段的默认类型
            items: [{
                fieldLabel: '年',
                flex: 1,
                inputId : 'yearId'
            },{
                    xtype: 'label',
                    forId : 'yearId',
                    text: '年'
                },{
                fieldLabel: '月',
                flex: 1,
                inputId : 'monthId'
            },{
                    xtype: 'label',
                    forId : 'monthId',
                    text: '月'
                },{
                fieldLabel: '日',
                flex: 1,
                inputId : 'dayId'
            },{
                    xtype: 'label',
                    forId : 'dayId',
                    text: '日'
                }]
        },{
        fieldLabel:'产地来源'
      }]
    });


vtype示例：




Javascript代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. Ext.create('Ext.form.Panel',{   
  3.             title:'vtype示例',   
  4.             width : 300,   
  5.             frame : true,   
  6.             renderTo: Ext.getBody(),   
  7.             bodyPadding: 5,   
  8.             defaultType: 'textfield',//设置表单字段的默认类型   
  9.             fieldDefaults:{//统一设置表单字段默认属性   
  10.                 labelSeparator :'：',//分隔符   
  11.                 labelWidth : 80,//标签宽度   
  12.                 width : 270,//字段宽度   
  13.                 msgTarget : 'side'  
  14.             },   
  15.             items:[{   
  16.                 fieldLabel:'电子邮件',   
  17.                 vtype:'email'  
  18.             },{   
  19.                 fieldLabel:'网址',   
  20.                 vtype:'url'  
  21.             },{   
  22.                 fieldLabel:'字母',   
  23.                 vtype:'alpha'  
  24.             },{   
  25.                 fieldLabel:'字母和数字',   
  26.                 vtype:'alphanum'  
  27.             }]   
  28.         });  
Ext.create('Ext.form.Panel',{
      title:'vtype示例',
      width : 300,
      frame : true,
      renderTo: Ext.getBody(),
      bodyPadding: 5,
      defaultType: 'textfield',//设置表单字段的默认类型
      fieldDefaults:{//统一设置表单字段默认属性
        labelSeparator :'：',//分隔符
        labelWidth : 80,//标签宽度
        width : 270,//字段宽度
        msgTarget : 'side'
      },
      items:[{
        fieldLabel:'电子邮件',
        vtype:'email'
      },{
        fieldLabel:'网址',
        vtype:'url'
      },{
        fieldLabel:'字母',
        vtype:'alpha'
      },{
        fieldLabel:'字母和数字',
        vtype:'alphanum'
      }]
    });


自定义电话号码验证示例：




Javascript代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. //自定义电话号码的vtype验证   
  3.         Ext.apply(Ext.form.field.VTypes, {   
  4.             phone:  function(v) {   
  5.                 //规则区号（3-4位数字）-电话号码（7-8位数字）   
  6.                 return /^(\d{3}-|\d{4}-)?(\d{8}|\d{7})$/.test(v);   
  7.             },   
  8.             phoneText: '请输入有效的电话号码',   
  9.             phoneMask: /[\d-]/i//只允许输入数字和-号   
  10.         });   
  11.         Ext.QuickTips.init();   
  12.         Ext.create('Ext.form.Panel',{   
  13.             title:'自定义电话号码验证示例',   
  14.             width : 300,   
  15.             frame : true,   
  16.             renderTo: Ext.getBody(),   
  17.             bodyPadding: 5,   
  18.             defaultType: 'textfield',//设置表单字段的默认类型   
  19.             fieldDefaults:{//统一设置表单字段默认属性   
  20.                 labelSeparator :'：',//分隔符   
  21.                 labelWidth : 80,//标签宽度   
  22.                 width : 270,//字段宽度   
  23.                 msgTarget : 'side'  
  24.             },   
  25.             items:[{   
  26.                 fieldLabel:'住宅号码',   
  27.                 vtype:'phone'//使用电话类型验证   
  28.             },{   
  29.                 fieldLabel:'办公号码',   
  30.                 vtype:'phone'//使用电话类型验证   
  31.             }]   
  32.         });  
//自定义电话号码的vtype验证
    Ext.apply(Ext.form.field.VTypes, {
        phone:  function(v) {
          //规则区号（3-4位数字）-电话号码（7-8位数字）
            return /^(\d{3}-|\d{4}-)?(\d{8}|\d{7})$/.test(v);
        },
        phoneText: '请输入有效的电话号码',
        phoneMask: /[\d-]/i//只允许输入数字和-号
    });
    Ext.QuickTips.init();
    Ext.create('Ext.form.Panel',{
      title:'自定义电话号码验证示例',
      width : 300,
      frame : true,
      renderTo: Ext.getBody(),
      bodyPadding: 5,
      defaultType: 'textfield',//设置表单字段的默认类型
      fieldDefaults:{//统一设置表单字段默认属性
        labelSeparator :'：',//分隔符
        labelWidth : 80,//标签宽度
        width : 270,//字段宽度
        msgTarget : 'side'
      },
      items:[{
        fieldLabel:'住宅号码',
        vtype:'phone'//使用电话类型验证
      },{
        fieldLabel:'办公号码',
        vtype:'phone'//使用电话类型验证
      }]
    });


自定义日期范围验证示例：




Javascript代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. //自定义VType类型，验证日期选择范围   
  3.         Ext.apply(Ext.form.field.VTypes, {   
  4.             //验证方法   
  5.             dateRange : function(val, field) {   
  6.                 var beginDate = null,//开始日期   
  7.                     beginDateCmp = null,//开始日期组件   
  8.                     endDate = null,//结束日期   
  9.                     endDateCmp = null,//结束日期组件   
  10.                     validStatus = true;//验证状态   
  11.                 if(field.dateRange){   
  12.                     //获取开始时间   
  13.                     if(!Ext.isEmpty(field.dateRange.begin)){   
  14.                         beginDateCmp = Ext.getCmp(field.dateRange.begin);   
  15.                         beginDate = beginDateCmp.getValue();   
  16.                     }   
  17.                     //获取结束时间   
  18.                     if(!Ext.isEmpty(field.dateRange.end)){   
  19.                         endDateCmp = Ext.getCmp(field.dateRange.end);   
  20.                         endDate = endDateCmp.getValue();   
  21.                     }   
  22.                 }   
  23.                 //如果开始日期或结束日期有一个为空则校验通过   
  24.                 if(!Ext.isEmpty(beginDate) && !Ext.isEmpty(endDate)){   
  25.                     validStatus =  beginDate <= endDate;   
  26.                 }   
  27.                    
  28.                 return validStatus;   
  29.             },   
  30.             //验证提示信息   
  31.             dateRangeText : '开始日期不能大于结束日期，请重新选择。'  
  32.         });   
  33.         Ext.QuickTips.init();//初始化提示;   
  34.         var dateForm = Ext.create('Ext.form.Panel',{   
  35.             title:'自定义日期范围验证示例',   
  36.             frame : true,   
  37.             width:250,   
  38.             renderTo: Ext.getBody(),   
  39.             bodyPadding: 5,   
  40.             fieldDefaults:{//统一设置表单字段默认属性   
  41.                 autoFitErrors : false,//不自动调整字段宽度   
  42.                 labelSeparator :'：',//分隔符   
  43.                 labelWidth : 90,//标签宽度   
  44.                 width : 210,//字段宽度   
  45.                 format:'Y年n月j日',//显示日期的格式   
  46.                 editable : false,//设置只读   
  47.                 allowBlank : false,//不允许为空   
  48.                 msgTarget : 'side'//设置提示信息展示位置   
  49.             },   
  50.             defaultType: 'datefield',//设置表单字段的默认类型   
  51.             items:[{   
  52.                 id:'beginDate1',   
  53.                 fieldLabel:'入学开始日期',   
  54.                 dateRange:{begin:'beginDate1',end:'endDate1'},//用于vtype类型dateRange   
  55.                 vtype:'dateRange'  
  56.             },{   
  57.                 id:'endDate1',   
  58.                 fieldLabel:'入学结束日期',   
  59.                 dateRange:{begin:'beginDate1',end:'endDate1'},//用于vtype类型dateRange   
  60.                 vtype:'dateRange'  
  61.             },{   
  62.                 id:'beginDate2',   
  63.                 fieldLabel:'毕业开始日期',   
  64.                 dateRange:{begin:'beginDate2',end:'endDate2'},//用于vtype类型dateRange   
  65.                 vtype:'dateRange'  
  66.             },{   
  67.                 id:'endDate2',   
  68.                 fieldLabel:'毕业结束日期',   
  69.                 dateRange:{begin:'beginDate2',end:'endDate2'},//用于vtype类型dateRange   
  70.                 vtype:'dateRange'  
  71.             }]   
  72.         });  
//自定义VType类型，验证日期选择范围
    Ext.apply(Ext.form.field.VTypes, {
      //验证方法
      dateRange : function(val, field) {
        var beginDate = null,//开始日期
          beginDateCmp = null,//开始日期组件
          endDate = null,//结束日期
          endDateCmp = null,//结束日期组件
          validStatus = true;//验证状态
        if(field.dateRange){
          //获取开始时间
          if(!Ext.isEmpty(field.dateRange.begin)){
            beginDateCmp = Ext.getCmp(field.dateRange.begin);
            beginDate = beginDateCmp.getValue();
          }
          //获取结束时间
          if(!Ext.isEmpty(field.dateRange.end)){
            endDateCmp = Ext.getCmp(field.dateRange.end);
            endDate = endDateCmp.getValue();
          }
        }
        //如果开始日期或结束日期有一个为空则校验通过
        if(!Ext.isEmpty(beginDate) && !Ext.isEmpty(endDate)){
          validStatus =  beginDate <= endDate;
        }

        return validStatus;
      },
      //验证提示信息
      dateRangeText : '开始日期不能大于结束日期，请重新选择。'
    });
    Ext.QuickTips.init();//初始化提示;
    var dateForm = Ext.create('Ext.form.Panel',{
      title:'自定义日期范围验证示例',
      frame : true,
      width:250,
      renderTo: Ext.getBody(),
      bodyPadding: 5,
      fieldDefaults:{//统一设置表单字段默认属性
        autoFitErrors : false,//不自动调整字段宽度
        labelSeparator :'：',//分隔符
        labelWidth : 90,//标签宽度
        width : 210,//字段宽度
        format:'Y年n月j日',//显示日期的格式
        editable : false,//设置只读
        allowBlank : false,//不允许为空
        msgTarget : 'side'//设置提示信息展示位置
      },
      defaultType: 'datefield',//设置表单字段的默认类型
      items:[{
        id:'beginDate1',
        fieldLabel:'入学开始日期',
        dateRange:{begin:'beginDate1',end:'endDate1'},//用于vtype类型dateRange
        vtype:'dateRange'
      },{
        id:'endDate1',
        fieldLabel:'入学结束日期',
        dateRange:{begin:'beginDate1',end:'endDate1'},//用于vtype类型dateRange
        vtype:'dateRange'
      },{
        id:'beginDate2',
        fieldLabel:'毕业开始日期',
        dateRange:{begin:'beginDate2',end:'endDate2'},//用于vtype类型dateRange
        vtype:'dateRange'
      },{
        id:'endDate2',
        fieldLabel:'毕业结束日期',
        dateRange:{begin:'beginDate2',end:'endDate2'},//用于vtype类型dateRange
        vtype:'dateRange'
      }]
    });


Ajax模式的表单数据加载：




Html代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. <HTML>  
  3.  <HEAD>  
  4.   <TITLE>Ajax模式的表单数据加载</TITLE>  
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  6.   <link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />  
  7.   <script type="text/javascript" src="extjs4/bootstrap.js"></script>  
  8.   <script type="text/javascript" src="extjs4/ext-lang-zh_CN.js"></script>  
  9.   <script type="text/javascript">  
  10.     Ext.onReady(function(){   
  11.         Ext.QuickTips.init();//初始化提示;   
  12.         var productForm = Ext.create('Ext.form.Panel',{   
  13.             title:'表单加载示例',   
  14.             width : 300,   
  15.             frame : true,   
  16.             fieldDefaults:{//统一设置表单字段默认属性   
  17.                 labelSeparator :'：',//分隔符   
  18.                 labelWidth : 80,//标签宽度   
  19.                 width : 200   
  20.             },   
  21.             renderTo: Ext.getBody(),   
  22.             items:[{   
  23.                 fieldLabel:'产品名称',   
  24.                 xtype : 'textfield',   
  25.                 name : 'productName',   
  26.                 value:'U盘'//同步加载数据   
  27.             },{   
  28.                 fieldLabel:'金额',   
  29.                 xtype : 'numberfield',   
  30.                 name : 'price',   
  31.                 value : 100//同步加载数据   
  32.             },{   
  33.                 fieldLabel:'生产日期',   
  34.                 xtype : 'datefield',   
  35.                 format:'Y年m月d日',//显示日期的格式   
  36.                 name : 'date',   
  37.                 value : new Date()//同步加载数据   
  38.             },{   
  39.                 xtype : 'hidden',   
  40.                 name : 'productId',   
  41.                 value:'001'//产品id   
  42.             },{   
  43.                 fieldLabel:'产品简介',   
  44.                 name : 'introduction',   
  45.                 xtype : 'textarea'   
  46.             }],   
  47.             buttons:[{   
  48.                 text : '加载简介',   
  49.                 handler : loadIntroduction   
  50.             }]   
  51.         });   
  52.         //表单加载数据的回调函数   
  53.         function loadIntroduction(){   
  54.             var params = productForm.getForm().getValues();   
  55.             productForm.getForm().load({   
  56.                 params : params,//传递参数   
  57.                 url : 'productServer.jsp',//请求的url地址   
  58.                 method:'GET',//请求方式   
  59.                 success:function(form,action){//加载成功的处理函数   
  60.                     Ext.Msg.alert('提示','产品简介加载成功');   
  61.                 },   
  62.                 failure:function(form,action){//加载失败的处理函数   
  63.                     Ext.Msg.alert('提示','产品简介加载失败<br>失败原因：'+action.result.errorMessage);   
  64.                 }   
  65.             });   
  66.         }   
  67.     });   
  68.   </script>  
  69.  </HEAD>  
  70.  <BODY STYLE="margin: 10px"></BODY>  
  71. </HTML>   
<HTML>
 <HEAD>
  <TITLE>Ajax模式的表单数据加载</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />
  <script type="text/javascript" src="extjs4/bootstrap.js"></script>
  <script type="text/javascript" src="extjs4/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
  Ext.onReady(function(){
    Ext.QuickTips.init();//初始化提示;
    var productForm = Ext.create('Ext.form.Panel',{
      title:'表单加载示例',
      width : 300,
      frame : true,
      fieldDefaults:{//统一设置表单字段默认属性
        labelSeparator :'：',//分隔符
        labelWidth : 80,//标签宽度
        width : 200
      },
      renderTo: Ext.getBody(),
      items:[{
        fieldLabel:'产品名称',
        xtype : 'textfield',
        name : 'productName',
        value:'U盘'//同步加载数据
      },{
        fieldLabel:'金额',
        xtype : 'numberfield',
        name : 'price',
        value : 100//同步加载数据
      },{
        fieldLabel:'生产日期',
        xtype : 'datefield',
        format:'Y年m月d日',//显示日期的格式
        name : 'date',
        value : new Date()//同步加载数据
      },{
        xtype : 'hidden',
        name : 'productId',
        value:'001'//产品id
      },{
        fieldLabel:'产品简介',
        name : 'introduction',
        xtype : 'textarea'
      }],
      buttons:[{
        text : '加载简介',
        handler : loadIntroduction
      }]
    });
    //表单加载数据的回调函数
    function loadIntroduction(){
      var params = productForm.getForm().getValues();
      productForm.getForm().load({
        params : params,//传递参数
        url : 'productServer.jsp',//请求的url地址
        method:'GET',//请求方式
        success:function(form,action){//加载成功的处理函数
          Ext.Msg.alert('提示','产品简介加载成功');
        },
        failure:function(form,action){//加载失败的处理函数
          Ext.Msg.alert('提示','产品简介加载失败<br>失败原因：'+action.result.errorMessage);
        }
      });
    }
  });
  </script>
 </HEAD>
 <BODY STYLE="margin: 10px"></BODY>
</HTML>




Jsp代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>   
  3. <%   
  4. //获取产品id   
  5. String productId = request.getParameter("productId");   
  6. if("001".equals(productId)){   
  7.     String msg = "{success:true,data:{introduction:'本产品美观实用，售后服务优秀。'}}";   
  8.     response.getWriter().write(msg);   
  9. }else{   
  10.     String msg = "{success:false,errorMessage:'数据不存在'}";   
  11.     response.getWriter().write(msg);   
  12. }   
  13. %>  
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
//获取产品id
String productId = request.getParameter("productId");
if("001".equals(productId)){
  String msg = "{success:true,data:{introduction:'本产品美观实用，售后服务优秀。'}}";
  response.getWriter().write(msg);
}else{
  String msg = "{success:false,errorMessage:'数据不存在'}";
  response.getWriter().write(msg);
}
%>



另外一种方式：




Java代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. public String getProductInfo(String productId)   
  3.     {   
  4.         String msg = "";   
  5.         if("001".equals(productId)){   
  6.             msg = "1本产品美观实用，售后服务优秀。";   
  7.         }else{   
  8.             msg = "0数据不存在";   
  9.         }   
  10.         return msg;   
  11.     }  
public String getProductInfo(String productId)
  {
    String msg = "";
    if("001".equals(productId)){
      msg = "1本产品美观实用，售后服务优秀。";
    }else{
      msg = "0数据不存在";
    }
    return msg;
  }


 




Javascript代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. //表单加载数据的回调函数   
  3.         function loadIntroduction(){   
  4.             var params = productForm.getForm().getValues();   
  5.             testdwr.getProductInfo(params.productId,function(ret){   
  6.                 if(ret.substring(0,1) == '1')   
  7.                 {   
  8.                     Ext.getCmp('introduction').setValue(ret.substring(1,ret.length-1));   
  9.                     Ext.Msg.alert('提示','产品简介加载成功');   
  10.                 }   
  11.                 else  
  12.                 {   
  13.                     Ext.Msg.alert('提示','产品简介加载失败<br>失败原因：'+ret.substring(1,ret.length-1));   
  14.                 }   
  15.             });   
  16.         }  
//表单加载数据的回调函数
    function loadIntroduction(){
      var params = productForm.getForm().getValues();
      testdwr.getProductInfo(params.productId,function(ret){
        if(ret.substring(0,1) == '1')
        {
          Ext.getCmp('introduction').setValue(ret.substring(1,ret.length-1));
          Ext.Msg.alert('提示','产品简介加载成功');
        }
        else
        {
          Ext.Msg.alert('提示','产品简介加载失败<br>失败原因：'+ret.substring(1,ret.length-1));
        }
      });
    }


登录简单处理：




Html代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. <HTML>  
  3.  <HEAD>  
  4.   <TITLE>Ajax模式的表单数据提交</TITLE>  
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  6.   <link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />  
  7.   <script type="text/javascript" src="extjs4/bootstrap.js"></script>  
  8.   <script type="text/javascript" src="extjs4/ext-lang-zh_CN.js"></script>  
  9.   <script type="text/javascript">  
  10.     Ext.onReady(function(){   
  11.         Ext.QuickTips.init();//初始化提示;   
  12.         var loginForm = Ext.create('Ext.form.Panel',{   
  13.             title:'表单提交示例',   
  14.             width : 230,   
  15.             frame : true,   
  16.             fieldDefaults:{//统一设置表单字段默认属性   
  17.                 labelSeparator :'：',//分隔符   
  18.                 labelWidth : 50,//标签宽度   
  19.                 msgTarget : 'side',   
  20.                 width : 200   
  21.             },   
  22.             renderTo: Ext.getBody(),   
  23.             bodyPadding: 5,   
  24.             defaultType: 'textfield',//设置表单字段的默认类型   
  25.             items:[{   
  26.                 fieldLabel:'用户名',   
  27.                 name : 'userName',   
  28.                 allowBlank : false,   
  29.                 vtype:'email'   
  30.             },{   
  31.                 fieldLabel:'密码',   
  32.                 name : 'password',   
  33.                 inputType : 'password',   
  34.                 allowBlank : false   
  35.             }],   
  36.             buttons:[{   
  37.                 text : '登陆',   
  38.                 handler : login   
  39.             },{   
  40.                 text : '重置',   
  41.                 handler : reset   
  42.             }]   
  43.         });   
  44.         function login(){//提交表单   
  45.             loginForm.getForm().submit({   
  46.                 clientValidation:true,//进行客户端验证   
  47.                 url : 'loginServer.jsp',//请求的url地址   
  48.                 method:'GET',//请求方式   
  49.                 success:function(form,action){//加载成功的处理函数   
  50.                     Ext.Msg.alert('提示','系统登陆成功');   
  51.                 },   
  52.                 failure:function(form,action){//加载失败的处理函数   
  53.                     Ext.Msg.alert('提示','系统登陆失败，原因：'+action.failureType);   
  54.                 }   
  55.             });   
  56.         }   
  57.         function reset(){//重置表单   
  58.             loginForm.form.reset();   
  59.         }   
  60.     });   
  61.   </script>  
  62.  </HEAD>  
  63.  <BODY  STYLE="margin: 10px"></BODY>  
  64. </HTML>   
<HTML>
 <HEAD>
  <TITLE>Ajax模式的表单数据提交</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />
  <script type="text/javascript" src="extjs4/bootstrap.js"></script>
  <script type="text/javascript" src="extjs4/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
  Ext.onReady(function(){
    Ext.QuickTips.init();//初始化提示;
    var loginForm = Ext.create('Ext.form.Panel',{
      title:'表单提交示例',
      width : 230,
      frame : true,
      fieldDefaults:{//统一设置表单字段默认属性
        labelSeparator :'：',//分隔符
        labelWidth : 50,//标签宽度
        msgTarget : 'side',
        width : 200
      },
      renderTo: Ext.getBody(),
      bodyPadding: 5,
      defaultType: 'textfield',//设置表单字段的默认类型
      items:[{
        fieldLabel:'用户名',
        name : 'userName',
        allowBlank : false,
        vtype:'email'
      },{
        fieldLabel:'密码',
        name : 'password',
        inputType : 'password',
        allowBlank : false
      }],
      buttons:[{
        text : '登陆',
        handler : login
      },{
        text : '重置',
        handler : reset
      }]
    });
    function login(){//提交表单
      loginForm.getForm().submit({
        clientValidation:true,//进行客户端验证
        url : 'loginServer.jsp',//请求的url地址
        method:'GET',//请求方式
        success:function(form,action){//加载成功的处理函数
          Ext.Msg.alert('提示','系统登陆成功');
        },
        failure:function(form,action){//加载失败的处理函数
          Ext.Msg.alert('提示','系统登陆失败，原因：'+action.failureType);
        }
      });
    }
    function reset(){//重置表单
      loginForm.form.reset();
    }
  });
  </script>
 </HEAD>
 <BODY  STYLE="margin: 10px"></BODY>
</HTML>




Jsp代码 ​​extjs4表单_extjs4​​ extjs4表单_表单_02extjs4表单_提示信息_03


  2. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>   
  3. <%   
  4.     String password = request.getParameter("password");   
  5.     String msg = "";   
  6.     if(password.length() < 6){//密码不足6位验证失败   
  7.         msg = "{success:false,errors:{password:'密码不得小于六位数字'}}";   
  8.     }else{//验证成功   
  9.         msg = "{success:true}";   
  10.     }   
  11.     response.getWriter().write(msg);   
  12. %>