statusbar-advanced.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:2k
源码类别:

中间件编程

开发平台:

JavaScript

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