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:表单提交

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值