-/*!
- * Ext JS Library 3.2.1
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-Ext.QuickTips.init();
+Ext.Loader.setConfig({
+ enabled: true
+});
+
+Ext.Loader.setPath('Ext.ux', '../ux/');
+
+Ext.require([
+ 'Ext.form.Panel',
+ 'Ext.form.field.Date',
+ 'Ext.tip.QuickTipManager',
+ 'Ext.ux.statusbar.StatusBar',
+ 'Ext.ux.statusbar.ValidationStatus'
+]);
-Ext.onReady(function(){
- var fp = new Ext.FormPanel({
+Ext.onReady(function(){
+ Ext.tip.QuickTipManager.init();
+ var fp = Ext.create('Ext.FormPanel', {
+ title: 'StatusBar with Integrated Form Validation',
+ renderTo: Ext.getBody(),
+ width: 350,
+ autoHeight: true,
+ layout: 'fit',
id: 'status-form',
renderTo: Ext.getBody(),
labelWidth: 75,
- width: 350,
- buttonAlign: 'right',
- border: false,
- bodyStyle: 'padding:10px 10px 0;',
+ bodyPadding: 10,
defaults: {
anchor: '95%',
allowBlank: false,
fieldLabel: 'Birthdate',
blankText: 'Birthdate is required'
}],
- buttons: [{
- text: 'Save',
- handler: function(){
- if(fp.getForm().isValid()){
- var sb = Ext.getCmp('form-statusbar');
- sb.showBusy('Saving form...');
- fp.getEl().mask();
- fp.getForm().submit({
- url: 'fake.php',
- success: function(){
- sb.setStatus({
- text:'Form saved!',
- iconCls:'',
- clear: true
- });
- fp.getEl().unmask();
- }
- });
+ dockedItems: [{
+ xtype: 'toolbar',
+ dock: 'bottom',
+ ui: 'footer',
+ items: ['->', {
+ text: 'Save',
+ handler: function(){
+ if(fp.getForm().isValid()){
+ var sb = Ext.getCmp('form-statusbar');
+ sb.showBusy('Saving form...');
+ fp.getEl().mask();
+ fp.getForm().submit({
+ url: 'fake.php',
+ success: function(){
+ sb.setStatus({
+ text:'Form saved!',
+ iconCls:'',
+ clear: true
+ });
+ fp.getEl().unmask();
+ }
+ });
+ }
}
- }
- }]
+ }]
+ },
+ Ext.create('Ext.ux.StatusBar', {
+ dock: 'bottom',
+ id: 'form-statusbar',
+ defaultText: 'Ready',
+ plugins: Ext.create('Ext.ux.statusbar.ValidationStatus', {form:'status-form'})
+ })]
});
-
- new Ext.Panel({
- title: 'StatusBar with Integrated Form Validation',
- renderTo: Ext.getBody(),
- width: 350,
- autoHeight: true,
- layout: 'fit',
- items: fp,
- bbar: new Ext.ux.StatusBar({
- id: 'form-statusbar',
- defaultText: 'Ready',
- plugins: new Ext.ux.ValidationStatus({form:'status-form'})
- })
- });
-
});
\ No newline at end of file