examples/statusbar/statusbar-advanced.js

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