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:效果图:

ExtJs学习笔记之FormPanel组件

3:常用属性及方法:

(1)属性:

  width:整型,表单宽度。

  height:整型,表单高度。

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

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

(2)方法:

  reset:表单重置。

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

  submit:表单提交

你可能感兴趣的:(FormPanel)