examples/statusbar/statusbar-advanced.js

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