FormPanel的使用方法

最新推荐文章于 2024-06-29 23:18:32 发布

dz2008

最新推荐文章于 2024-06-29 23:18:32 发布

阅读量429

点赞数

分类专栏： Ext笔记文章标签： EXT JavaScript JSP CSS Ajax ViewUI

Ext笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

FormPanelTest.html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>FormTest</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>

Ext.onReady(function(){
function checkNameFn(v,o){/*这个validation方法是修改后的，Ext2.0中不支持参数o*/
  function successFn(v,p){
   if(!eval(v.responseText)){
    o.markInvalid();
   };

  };
  function failureFn(v,p){
   o.markInvalid();
  };

  Ext.Ajax.request({
     url: 'http://127.0.0.1:8080/CsssWeb/checker.jsp',
     success: successFn,
     failure: failureFn,
     params: { checkValue: v }
  });
  return true;
}

var nameField = new Ext.form.NumberField({
  fieldLabel : 'ID',
  name: 'numField',
  width : 120,
  value : 0,
  validationEvent : 'onblur',
  allowBlank : false
});
var nameField1 = new Ext.form.TextField({
  fieldLabel : '名称',
  name: 'nameField',
  width : 120,
  allowBlank : false,
  validationEvent : 'onblur',
  validator : checkNameFn
});

var formPanel=new Ext.form.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        frame:true,
        title: 'Simple Form',
        bodyStyle:'padding:10px 10px 10px',
  labelAlign : 'right',
        width: 350,
        defaults: {width: 230},
  items : [
   nameField,
   nameField1
  ],
  buttonAlign : 'center',
  buttons: [
   {
    text : '提交',
    listeners : {
     click : function(){formPanel.getForm().doAction('submit',{
         url:'http://127.0.0.1:7001/CsssWeb/jsonData.jsp',
         waitMsg:'Saving Data...',
         clientValidation : false
        });
       }
    }
   },
   {
    text : '重填',
    listeners : {
     click : function(){formPanel.getForm().getEl().dom.reset();}
    }
   }
  ]