无废话ExtJs 入门教程四[表单：FormPanel]

时间：2023-12-13 12:17:20
extjs技术交流，欢迎加群（201926085)无废话ExtJs 入门教程四[表单：FormPanel]

继上一节内容，我们在窗体里加了个表单。如下所示代码区的第28行位置，items:form。

1.代码如下：

无废话ExtJs 入门教程四[表单：FormPanel]
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 2 <html xmlns="http://www.w3.org/1999/xhtml">

 3 <head>

 4     <title></title>

 5     <!--ExtJs框架开始-->

 6     <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>

 7     <script type="text/javascript" src="/Ext/ext-all.js"></script>

 8     <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />

 9     <!--ExtJs框架结束-->

10     <script type="text/javascript">

11         Ext.onReady(function () {

12             var form = new Ext.form.FormPanel({

13                 frame: true,

14                 title: '表单标题',

15                 style: 'margin:10px',

16                 html: '<div style="padding:10px">这里表单内容</div>'

17             });

18             var win = new Ext.Window({

19                 title: '窗口',

20                 width: 476,

21                 height: 374,

22                 html: '<div>这里是窗体内容</div>',

23                 resizable: true,

24                 modal: true,

25                 closable: true,

26                 maximizable: true,

27                 minimizable: true,

28                 items: form

29             });

30             win.show();

31         });

32     </script>

33 </head>

34 <body>

35     <!--

36 说明：

37 (1)var form = new Ext.form.FormPanel({}):创建一个新的form表单对象。

38 (2)title: '表单标题'：表单的标题，如果不加的话，不会出现上面的浅色表单标题栏。

39 (3)style: 'margin:10px':表单的样式，加了个外10px的外边距。

40 (4)html: '<div style="padding:10px">这里表单内容</div>'：表单内显示html的内容。

41 -->

42 </body>

43 </html>
无废话ExtJs 入门教程四[表单：FormPanel]

2.效果如下：

无废话ExtJs 入门教程四[表单：FormPanel]

3.form 组件常用的：属性、方法及事件

一、属性

width:整型，表单宽度。

height:整型，表单高度。

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

二、方法

reset:表单重置。

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

submit:表单提交。

活到老,学到老,练到老...

相关文章