Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / statusbar-advanced.html
1 <html>\r
2 <head>\r
3   <title>The source code</title>\r
4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
6 </head>\r
7 <body  onload="prettyPrint();">\r
8     <pre class="prettyprint lang-js">/*\r
9  * Ext JS Library 2.2\r
10  * Copyright(c) 2006-2008, Ext JS, LLC.\r
11  * licensing@extjs.com\r
12  *\r
13  * http://extjs.com/license\r
14  */\r
15 \r
16 \r
17 Ext.QuickTips.init();\r
18 \r
19 Ext.onReady(function(){\r
20 \r
21     var fp = new Ext.FormPanel({\r
22         id: 'status-form',\r
23         renderTo: Ext.getBody(),\r
24         labelWidth: 75,\r
25         width: 350,\r
26         buttonAlign: 'right',\r
27         border: false,\r
28         bodyStyle: 'padding:10px 10px 0;',\r
29         defaults: {\r
30             anchor: '95%',\r
31             allowBlank: false,\r
32             selectOnFocus: true,\r
33             msgTarget: 'side'\r
34         },\r
35         items:[{\r
36             xtype: 'textfield',\r
37             fieldLabel: 'Name',\r
38             blankText: 'Name is required'\r
39         },{\r
40             xtype: 'datefield',\r
41             fieldLabel: 'Birthdate',\r
42             blankText: 'Birthdate is required'\r
43         }],\r
44         buttons: [{\r
45             text: 'Save',\r
46             handler: function(){\r
47                 if(fp.getForm().isValid()){\r
48                     var sb = Ext.getCmp('form-statusbar');\r
49                     sb.showBusy('Saving form...');\r
50                     fp.getEl().mask();\r
51                     fp.getForm().submit({\r
52                         url: 'fake.php',\r
53                         success: function(){\r
54                             sb.setStatus({\r
55                                 text:'Form saved!',\r
56                                 iconCls:'',\r
57                                 clear: true\r
58                             });\r
59                             fp.getEl().unmask();\r
60                         }\r
61                     });\r
62                 }\r
63             }\r
64         }]\r
65     });\r
66 \r
67     new Ext.Panel({\r
68         title: 'StatusBar with Integrated Form Validation',\r
69         renderTo: Ext.getBody(),\r
70         width: 350,\r
71         autoHeight: true,\r
72         layout: 'fit',\r
73         items: fp,\r
74         bbar: new Ext.ux.StatusBar({\r
75             id: 'form-statusbar',\r
76             defaultText: 'Ready',\r
77             plugins: new Ext.ux.ValidationStatus({form:'status-form'})\r
78         })\r
79     });\r
80 \r
81 });</pre>    \r
82 </body>\r
83 </html>