無廢話ExtJs 入門教程四[表單:FormPanel]


朋友炒股兩個月賺了10萬,我幫他推廣一下公眾號,把錢用來投資總比放銀行連通貨膨脹都跑不過里強硬核離職,在家炒股 ,這是他每天的日志,有些經驗是花錢也買不到的。

繼上一節內容,我們在窗體里加了個表單。如下所示代碼區的第28行位置,items:form。

1.代碼如下:

 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>

2.效果如下:

3.form 組件常用的:屬性、方法及事件

一、屬性

width:整型,表單寬度。

height:整型,表單高度。

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

二、方法

reset:表單重置。

isValid:表單是否驗證全部通過。

submit:表單提交。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM