Jump to main content Jump to doc navigation

MODx.Window

Extends: Ext.Window Key Features: Drag-and-drop functionality; connector functionality for saving.

MODExt Windows are a convenient way to display record data from a Grid or AJAX request for editing. Windows automatically include a FormPanel which you can add form fields (and other components) to. Submitting/saving a Window actually submits the FormPanel, and initiates an AJAX request to your connector.

Unique Parameters

Name Description Default
action If baseParams is not set, will use this as the action to the controller.
allowDrop Whether or not to allow dropping of tree items onto the form fields. 1
baseParams An object of parameters to send along with the window form on save. {}
blankValues If true, will reset the values of the form each time it is shown. 0
cancelBtnText The text of the cancel button for the window. Cancel
fields An array of fields for the form, similar to Ext.form.FormPanel's fields definition. []
fileUpload If true, the form will be built to accept files. 0
formFrame Whether or not to add a ext-style frame to the window. 1
labelAlign The alignment of the labels on the form. right
labelWidth The width, in pixels, of the labels on the form. 100
record A JSON object of default values (in name: value format) to set to the form when first loading the window. {}
saveBtnText The text of the save button for the window. Save
url The URL of the connector to submit the window form to.

Custom Events

Name Description
success If the form submission returns a success response.
failure If the form submission returns a failure response.
beforeSubmit Before the form submits its values to the connector, but after validation passes.

Unique Functionality

Firing the submit method

You can manually fire the submission of the Window's form by running the submit() method, which has an optional "close" parameter (1/0) that, if 1, will close the window on success. Example:

var w = Ext.getCmp('my-window-id');
w.submit(true); /* submit and then close window */

setValues

The MODx.Window class comes with a setValues method, that will set the form values of the window:

var w = Ext.getCmp('my-window-id');
w.setValues({
  name: 'John'
  ,email: 'my@email.com'
});

reset

You can run the reset method to empty (reset) all the fields on the form:

var w = Ext.getCmp('my-window-id');
w.reset();

Hiding and Showing Fields

MODx.Window comes with a few assistance methods for making fields in its forms visible or hidden:

var w = Ext.getCmp('my-window-id');
w.hideField('email');
w.showField('comments');

See Also

  1. MODExt MODx Object
  2. MODExt Tutorials
    1. Ext JS Tutorial - Message Boxes
    2. Ext JS Tutorial - Ajax Include
    3. Ext JS Tutorial - Animation
    4. Ext JS Tutorial - Manipulating Nodes
    5. Ext JS Tutorial - Panels
    6. Ext JS Tutoral - Advanced Grid
    7. Ext JS Tutorial - Inside a CMP
  3. MODx.combo.ComboBox
  4. MODx.Console
  5. MODx.FormPanel
  6. MODx.grid.Grid
  7. MODx.grid.LocalGrid
  8. MODx.msg
  9. MODx.tree.Tree
  10. MODx.Window