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:表单提交
成功根本没有什么秘诀可言,如果真是有的话,就是两个:第一个就是坚持到底,永不放弃;第二个是当你想放弃的时候,回过头来看看第一个秘诀:坚持到底,永不放弃