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)属性:

  width:整型,表单宽度。

  height:整型,表单高度。

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

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

(2)方法:

  reset:表单重置。

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

  submit:表单提交

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。