From Learn About the Ext JavaScript Library

Contents 1 Description 2 Example usage 3 Cancelling the action 4 Knowing when the form is submitted succesfully 5 Source Code 6 ChangeLog

Description

This plugin is a convenient extension to add standard Ok/Cancel buttons, or a Close button to a window. The plugin also contains standard behaviour for the Ok button, (Validating and submitting a BasicForm) so it is no longer necessary to write this code for every window. Instead, adding the plugin to your windows plugin parameter is enough.

Example usage

This code will add an Ok and a Cancel button. The Ok button will submit the form to the url: '/myUrl.php':

var window = new Ext.Window({
    width: 400,
    height: 200,
    url: '/myUrl.php',
    ....
    plugins: new Ext.bb.DefaultWindowButtons({
        baseParams: {
           myParam: 'aValue'
        }
    }),
    items:[{
        xtype:'form',               // Add a formPanel
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'Id',
            name: 'id',
        }, {
            fieldLabel: 'Name',
            name: 'name'
        }]
    }]
});

This code will add a Close button. A close button doesn't need an url.

var window = new Ext.Window({
    width: 400,
    height: 200,
    ....
    plugins: new Ext.bb.DefaultWindowButtons({
      closeBtn: true
    }),
    items:[{
        xtype:'form',               // Add a formPanel
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'Id',
            name: 'id',
        }, {
            fieldLabel: 'Name',
            name: 'name'
        }]
    }]
});

Cancelling the action

You can cancel any action by subscribing to the beforexxx handler and returning false.

var window = new Ext.Window({
    width: 400,
    height: 200,
    ....
    plugins: new Ext.bb.DefaultWindowButtons({
        url: '/myUrl.php',
        listener: {
            scope: this,
            'beforeok': function onBeforeOk(plugin, form, action) {
                if(somelogic)
                    return false;
            }
        }
    }),
    items:[{
        ...
    }]
});

Knowing when the form is submitted succesfully

If you need to refresh a window based on whether or not the form is succesfully submitted, subcribe to the 'aftersubmit' event. This event is thrown after a succesfull submit action, but before the window is closed.

Source Code

Ext.namespace('Ext.bb');
 
/**
 * @class Ext.bb.DefaultWindowButtons
 * @extends Ext.util.Observable
 * This extension adds either an Ok and a Cancel button or a Close button to the window. The idea is that
 * every window needs these default buttons with the associated default behaviour when a button is pressed.
 * By using this extension, you do not need to include code like this in every window.
 * However, this code assumes you have added only one {@link Ext.form.FormPanel} to the window,
 * as the onOk handler submits only the first FormPanel found. 
 * <br>
 * The default behaviour is defines as follows:
 * <ul>
 * <li><b>Ok button</b><p class="sub-desc">Validates the formPanel and submits the form.</p></li>
 * <li><b>Cancel button</b><p class="sub-desc">Disregards any changes in the form and closes the window.</p></li>
 * <li><b>Close button</b><p class="sub-desc">Closes the window.</p></li>
 * </ul>
 * 
 * <p>
     * <pre><code>
var windown = new Ext.Window({
    width: 400,
    height: 200,
    url: '/myUrl.php',
    ....
    plugins: new Ext.bb.DefaultWindowButtons({}),
	items:[{
        // form
        xtype:'form',
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'Id',
            name: 'id',
        }, {
            fieldLabel: 'Name',
            name: 'name'
        }]
	}]
});</code></pre>
 *
 * <p>
 * <pre><code>
var windown = new Ext.Window({
    width: 400,
    height: 200,
 
    ....
    plugins: new Ext.bb.DefaultWindowButtons({
    	url: '/myUrl.php',
    	baseParams: {
    		someProp: 'aValue'
    	}
    }),
	items:[{
        // form
        xtype:'form',
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'Id',
            name: 'id',
        }, {
            fieldLabel: 'Name',
            name: 'name'
        }]
	}]
});</code></pre>
 * <p>
 * @constructor
 * @param {Object} config The config object
 */
Ext.bb.DefaultWindowButtons = function(config){
	this.name = "Ext.bb.DefaultWindowButtons",
    Ext.apply(this, config || {});
    this.addEvents(    
		/**
	     * @event beforeok
	     * Fires after the form is succesfully validated but before the form is submitted.
	     * Return false to prevent submitting the form.
	     * @param {Button} The Ok button
	     * @param {EventObject} e The click event
	     */
	    "beforeok",    
		/**
	     * @event aftersubmit
	     * Fires after the form is succesfully submitted.
	     * @param {Ext.bb.DefaultWindowButtons} This plugin
	     * @param {Object} form The form that requested the action
	     * @param {Object} action The Action class. The {@link Ext.form.Action#result result}
         * property of this object may be examined to perform custom postprocessing.
	     */
		"aftersubmit",
		/**
	     * Fires before the Cancel window is pressed.
	     * Return false to prevent submitting the form.
	     * @param {Button} The Cancel button
	     * @param {EventObject} e The click event
	     */
	    "beforecancel",    
		/**
	     * @event beforeclose
	     * Fires when the Close button is clicked
	     * @param {Button} The Close button
	     * @param {EventObject} e The click event
	     */
	    "beforeclose"
	);
    Ext.bb.DefaultWindowButtons.superclass.constructor.call(this);
}
 
Ext.extend(Ext.bb.DefaultWindowButtons, Ext.util.Observable, {
	/**
	 * @cfg {Boolean} closeBtn 
	 * True to add a Close button only. False or omitted to add an Ok and a Cancel button.
	 */
	/**
     * @cfg {String} url
	 * The URL to use for form actions if one isn't supplied in the action options.  
	 * If this property is not defined, this plugin will use the url in the window.   
	 */	
    /**
     * @cfg {Object} baseParams
     * Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
     */
 
    /**
     * Init method of the plugin
     * @param {Object} win The window object to which to add the buttons
     */	
    init: function(win){
        this.win = win;
        if (this.closeBtn) {
            win.addButton({
                text: 'Close',
            }, this.onClose, this);
        }
        else {
            win.addButton({
                text: 'Ok',
            }, this.onOk, this);
            win.addButton({
                text: 'Cancel',
            }, this.onCancel, this);
        }
    },
    /**
     * Ok button handler
     * @param {Button} The Ok button
     * @param {EventObject} e The click event
     */		
    onOk: function(btn, ev){
        var form = this.win.findByType('form');  // The FormPanel
        if (form && form.length > 0) {
			form = form[0].form;                 // The BasicForm
			if (form.isValid()) {
				if (this.fireEvent("beforeok", this, this.win) !== false) {
					form.submit({
						scope: this,
						url: this.url || this.win.url,
						clientValidation: false, // Already done
						params: this.baseParams || {},
						success: function(form, action){
							this.fireEvent("aftersubmit", this, form, action);
							this.win[this.win.closeAction]();
						},
						failure: function(form, action){
							Ext.MessageBox.alert('Error:', action.result.msg);
						}
					});
				}
			}
        }
    },
    /**
     * Ok button handler
     * @param {Button} The Cancel button
     * @param {EventObject} e The click event
     */		
    onCancel: function(btn, ev){
        if (this.fireEvent("beforecancel", this, this.win) !== false) {
            this.win[this.win.closeAction]();
        }
    },
    /**
     * Ok button handler
     * @param {Button} The Close button
     * @param {EventObject} e The click event
     */	
    onClose: function(btn, ev){
        if (this.fireEvent("beforeclose", this, this.win) !== false) {
            this.win[this.win.closeAction]();
        }
    }
});

ChangeLog

• Ver.: 0.9 Initial release.
• Ver.: 0.91 Event 'aftersubmit' added, configurable url and baseParams added.
• Ver.: 0.92 this.win.close() changed to this.win[this.win.closeAction]();