examples/statusbar/statusbar-advanced.js

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