examples/statusbar/statusbar-advanced.js

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