FormPanel基本表单

Ext教程

Ext控件使用

FormPanel基本表单

FormPanel基本表单

2008-04-24

在web页面中，表单可谓是最常用的控件之一，ext的表单控件同样强悍，且使用非常简单，下面我们实现一个简单的带验证的表单，看以下代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
   <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
   <script type="text/javascript" src="ext/ext-all.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body>
   <script>
   Ext.onReady(function(){
    Ext.QuickTips.init();//开启表单提示
        Ext.form.Field.prototype.msgTarget = 'side';//设置提示信息位置为边上
        var simple = new Ext.FormPanel({//初始化表单面板
        labelWidth: 75, // 默认标签宽度
        frame:true,//设置表单面板，false为无面板
        title: '我的表单',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        defaults: {width: 230},
        defaultType: 'textfield',//默认字段类型

        items: [{
                fieldLabel: '帐户',
                name: 'name',
                allowBlank:false,
               blankText: '帐户不能为空'
            },{
                fieldLabel: '密码',
                name: 'pws',
               allowBlank:false,//禁止为空
               blankText: '密码不能为空'//可限制多种类型，具体参照api文档
            }
        ],

        buttons: [{
            text: '登录',
           handler:function(){alert("你提交了表单！");}//提交表单与服务器交互的实例请参照实例分析部分《一个完整的登录实例》
        },{
            text: '取消',
           handler:function(){simple.form.reset();}//重置表单
        }]
    });

    simple.render('show');//填充到指定区域
});
   </script>
   <div id="show"></div>
</body>
</html>

效果如图：

也可以将表单作为窗体的一部分，看以下代码：

<body>
<script>
Ext.onReady(function(){
    Ext.QuickTips.init();//开启表单提示
        Ext.form.Field.prototype.msgTarget = 'side';//设置提示信息位置为边上
        var simple = new Ext.FormPanel({//初始化表单面板
        labelWidth: 75, // 默认标签宽度板
  baseCls: 'x-plain',//不设置该值，表单将保持原样，设置后表单与窗体完全融合（-_-!!，说不清了，大家可以去掉运行下看看）
        bodyStyle:'padding:5px 5px 0',
        width: 350,
  border:false,
        defaults: {width: 230},
        defaultType: 'textfield',//默认字段类型

        items: [{
                fieldLabel: '帐户',
                name: 'name',
                allowBlank:false,
    blankText: '帐户不能为空'
            },{
                fieldLabel: '密码',
                name: 'pws',
    allowBlank:false,//禁止为空
    blankText: '密码不能为空'//可限制多种类型，具体参照api文档
            }
        ],

        buttons: [{
            text: '登录',
   handler:function(){alert("你提交了表单！");}//提交表单与服务器交互的实例请参照实例分析部分《一个完整的登录实例》
        },{
            text: '取消',
   handler:function(){simple.form.reset();}//重置表单
        }]
    });

//构建窗体，窗体会在之后具体讲
    win = new Ext.Window({
  id:'win',
  title:'登陆',
  layout:'fit',
  width:360,
  height:150,
  plain:true,
  bodyStyle:'padding:5px;',
  maximizable:false,
  closeAction:'close',
  closable:false,
  collapsible:true,
  plain: true,
  buttonAlign:'center',
  items:simple//作为窗体元素
});
win.show();
});
</script>

</body>
</html>

运行以上代码，将有如下效果：

打完收工，下一节咱们加上服务端代码。

< 上一篇		下一篇 >


	Copyright Infotmation overhere. \| designed by Magicbox from Mambochina 曼波整站系统基于 Mambo 开发，是免费的自由软件，遵循 GNU/GPL 开源许可协议。曼波整站系统5.4.0 由 Mambo中国和 Mambo Resource 联合增强开发。闽ICP备08005204号