您的位置：首页 > Web前端 > JavaScript

Extjs学习 Ext.form.FormPanel

2012-07-13 21:09 645 查看

   ExtJS的表单是在html表单的基础上封装来的，样式变成漂亮的样式，但是如果你使用FireBug查看，你就会发现，这些表单控件依然是原来的<input>控件，只是加上了css，让他变得漂亮。

    但是如果只是加上css样式，在我看来，ExtJS无法给我一个理由，让我选择它的表单控件，而不是选择<input>控件，因为我已经使用原有的控件相当熟练。

    Extjs考虑了类似我这样的想法，它当然有更强大的功能。想想我们原有的<input>控件还有什么令我们不爽的地方，又有哪些功能得让我们反复的自己编写。魔兽世界里地精总说的一句话“需求是发明之母”，看看ExtJS为我们添加了什么功能。

    1、输入框的数据校验

    2、原来没有的Combox控件



    html里面表单放到<form>之中，Ext里面表单则放到FormPanel中，FormPanel继承自Ext.Panel。所以FormPanel也可以被放在容器之中。

    FormPanel有两种布局form(横向)和column(纵向)，这一章还将讲到FormPanel特有的form布局。

    我们先添加一个FormPanel，并放置一个输入框、一个提交按钮创建一个最简单的表单
<html>

<head>

    <title>跟浩然哥哥学习表单</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css" />

    <script type="text/javascript" src="ext-4.0/ext-all.js"></script>

    <script type="text/javascript">

        Ext.onReady(function () {

            var myFormPanel = new Ext.form.FormPanel({

                xtype: 'form',

                title: '浩然哥哥的FormPanel',

                width: 400,height: 400,

                standardSubmit: true,

                url: 'message_box.html',

                items:

                    [
                        //在这里添加组件
                        { xtype: 'textfield', fieldLabel: '输入框' }

                    ],

                buttons: [{ text: '提交', handler: login}]

            });

            var viewport = new Ext.Viewport({

                items: [myFormPanel]

            });

            function login() {

                myFormPanel.getForm().submit({

                    clientValidation: true,

                    waitMsg: 'Please wait...',

                    waitTitle: 'Hint',

                    method: 'GET',

                    success: function () {

                        Ext.Msg.alert('成功', '恭喜！表单提交成功');

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： extjs function 正则表达式 login stylesheet html

相关文章推荐

新的分享

章节导航