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>