examples/statusbar/statusbar-advanced.js

   1 Ext.Loader.setConfig({
   2     enabled: true
   3 });
   4
   5 Ext.Loader.setPath('Ext.ux', '../ux/');
   6
   7 Ext.require([
   8   'Ext.form.Panel',
   9   'Ext.form.field.Date',
  10   'Ext.tip.QuickTipManager',
  11   'Ext.ux.statusbar.StatusBar',
  12   'Ext.ux.statusbar.ValidationStatus'
  13 ]);
  14
  15
  16 Ext.onReady(function(){
  17     Ext.tip.QuickTipManager.init();
  18     var fp = Ext.create('Ext.FormPanel', {
  19         title: 'StatusBar with Integrated Form Validation',
  20         renderTo: Ext.getBody(),
  21         width: 350,
  22         autoHeight: true,
  23         layout: 'fit',
  24         id: 'status-form',
  25         renderTo: Ext.getBody(),
  26         labelWidth: 75,
  27         bodyPadding: 10,
  28         defaults: {
  29             anchor: '95%',
  30             allowBlank: false,
  31             selectOnFocus: true,
  32             msgTarget: 'side'
  33         },
  34         items:[{
  35             xtype: 'textfield',
  36             fieldLabel: 'Name',
  37             blankText: 'Name is required'
  38         },{
  39             xtype: 'datefield',
  40             fieldLabel: 'Birthdate',
  41             blankText: 'Birthdate is required'
  42         }],
  43         dockedItems: [{
  44             xtype: 'toolbar',
  45             dock: 'bottom',
  46             ui: 'footer',
  47             items: ['->', {
  48                 text: 'Save',
  49                 handler: function(){
  50                     if(fp.getForm().isValid()){
  51                         var sb = Ext.getCmp('form-statusbar');
  52                         sb.showBusy('Saving form...');
  53                         fp.getEl().mask();
  54                         fp.getForm().submit({
  55                             url: 'fake.php',
  56                             success: function(){
  57                                 sb.setStatus({
  58                                     text:'Form saved!',
  59                                     iconCls:'',
  60                                     clear: true
  61                                 });
  62                                 fp.getEl().unmask();
  63                             }
  64                         });
  65                     }
  66                 }
  67             }]
  68         },
  69             Ext.create('Ext.ux.StatusBar', {
  70                 dock: 'bottom',
  71                 id: 'form-statusbar',
  72                 defaultText: 'Ready',
  73                 plugins: Ext.create('Ext.ux.statusbar.ValidationStatus', {form:'status-form'})
  74             })]
  75     });
  76 });