ExtJs学习笔记之FormPanel组件

FormPanel组件

　　FormPanel 为 form 表单提供了一个标准的容器. 本质上还是一个标准的 Ext.panel.Panel, 只是自动创建了一个 BasicForm 来管理所有添加到 Panel中的Ext.form.field.Field 对象. 可以快捷方便地进行配置以及处理 BasicForm 和表单域.

1、示例：

　　在window窗体中添加一个FormPanel组件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../ext-js-4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-js-4.2.1/ext-all.js"></script>
<script type="text/javascript" src="../ext-js-4.2.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
    Ext.onReady(function() {  
        var form = new Ext.form.FormPanel({
            frame : true,
            title : '表单标题',
            style : 'margin:10px',
//             draggable : true,        //可拖拽
            html : '<div style ="padding:10px">这里是表单内容</div>'
        });
        
        var win = new Ext.Window({
            title : '窗体window',
            width : 500,
            height : 200,
            draggable : true,
            html : '<div>这里是窗体的内容</div>',
            resizable : true,
            modal : true,
            closable : true,
            maximizable : true,
            minimizable : true,
            items : form
        });
        win.show();
        });  
</script>
</head>
<body>
    <!--
     说明：
     (1)var form = new Ext.form.FormPanel({}):创建一个新的form表单对象。
     (2)title: '表单标题'：表单的标题，如果不加的话，不会出现上面的浅色表单标题栏。
     (3)style: 'margin:10px':表单的样式，加了个外10px的外边距。
     (4)html: '<div style="padding:10px">这里表单内容</div>'：表单内显示html的内容。
     (5)frame:true：true 为 Panel 填充画面,默认为false.
 -->
</body>
</html>

2：效果图：

3：常用属性及方法：

（1）属性：

　　整型，表单宽度。

　　height:整型，表单高度。

　　url:字符串，表单提交地址。

　　frame:true 为 Panel 填充画面,默认为false。

（2）方法：

　　reset:表单重置。

　　isValid:表单是否验证全部通过。

　　submit:表单提交