Table Of Contents

Previous topic


Next topic



class gxp.plugins.WizardStep(config)

Base class for application plugins that are part of a wizard interface. To use this in an application, the outputTarget of each wizard step needs to go into the same container, with no other items in it. Also, the container needs to be configured with the gxp.plugins.WizardContainer plugin.

A typical viewer with a wizard interface would have a container like this in its portalItems:

    layout: "accordion",
    width: 280,
    items: [{
        id: "step1",
        title: "Step 1 - do something"
    }, {
        id: "step2",
        title: "Step 2 - do more"
    plugins: [gxp.plugins.WizardContainer]

The wizard step plugins that inherit from this base class would then be configured like this in the viewer’s tools configuration:

    ptype: "app_step1",
    outputTarget: "step1"
}, {
    ptype: "app_stap2",
    outputTarget: "step2"

The app_step1 plugin could look like this:

app.Step1 = Ext.extend(gxp.plugins.WizardStep, {

    // autoActivate is false by default, but for many workflows it
    // makes sense to start with step 1 active
    autoActivate: true,

    addOutput: function(config) {
        return app.Step1.superclass.addOutput({
            xtype: "form",
            monitorValid: true,
            items: [{
                xtype: "textfield",
                ref: "myValue",
                allowBlank: false
            listeners: {
                "clientvalidation": function(cmp, valid) {
                    // Set the valid state of this wizard step. If it
                    // is valid, the pane for step 2 will be enabled,
                    // and disabled otherwise.
                    this.setValid(valid, {step1Value: cmp.myValue})


Config Options

Configuration properties in addition to those listed for Ext.util.Observable.

Array Custom actions for tools that do not provide their own. Array elements are expected to be valid Ext config objects. Actions provided here may have an additional menuText property, which will be used as text when the action is used in a menu. The text property will only be used in buttons. Optional, only needed to create custom actions.

Object or String or Array Where to place the tool’s actions (e.g. buttons or menus)?

In case of a string, this can be any string that references an Ext.Container property on the portal, or a unique id configured on a component.

In case of an object, the object has a “target” and an “index” property, so that the tool can be inserted at a specified index in the target.

actionTarget can also be an array of strings or objects, if the action is to be put in more than one place (e.g. a button and a context menu item).

To reference one of the toolbars of an Ext.Panel, “.tbar”, “.bbar” or “.fbar” has to be appended. The default is “map.tbar”. The viewer’s main MapPanel can always be accessed with “map” as actionTarget. Set to null if no actions should be created.

Some tools provide a context menu. To reference this context menu as actionTarget for other tools, configure an id in the tool’s outputConfig, and use the id with “.contextMenu” appended. In the snippet below, a layer tree is created, with a “Remove layer” action as button on the tree’s top toolbar, and as menu item in its context menu:

    xtype: "gxp_layertree",
    outputConfig: {
        id: "tree",
        tbar: []
}, {
    xtype: "gxp_removelayer",
    actionTarget: ["tree.tbar", "tree.contextMenu"]

If a tool has both actions and output, and you want to force it to immediately output to a container, set actionTarget to null. If you want to hide the actions, set actionTarget to false. In this case, you should configure a defaultAction to make sure that an action is active.

Boolean Activate the tool as soon as the application is ready? Default is false.
Object If this tool is associated with an OpenLayers.Control then this is an optional object to pass to the constructor of the associated OpenLayers.Control.
Number Optional index of an action that should be active by default. Only works for actions that are a GeoExt.Action instance.
Number The actions array index of the action that should trigger this tool’s output. Only valid if actions is configured. Leave this unconfigured if none of the actions should trigger this tool’s output.
Object Optional configuration for the output container. This may be useful to override the xtype (e.g. “window” instead of “gx_popup”), or to provide layout configurations when rendering to an outputTarget.
String Where to add the tool’s output container? This can be any string that references an Ext.Container property on the portal, or “map” to access the viewer’s main map. If not provided, a window will be created.
String If this tool should be radio-button style toggled with other tools, this string is to identify the toggle group.

Public Properties

Public properties in addition to those listed for Ext.util.Observable.
Boolean Is the tool currently active?
Ext.Container The container that holds all wizard steps. Available after this tool’s output was added to its container.
Object Merged object of all properties that wizard steps send as 2nd argument of the setValid method.

Public Methods

Public methods in addition to those listed for Ext.util.Observable.

Returns:Boolean true when this tool was activated

Activates this tool.

Parameter:actionsArray Optional actions to add. If not provided, this.actions will be added.
Returns:Array The actions added.
Parameter:configObject configuration for the Ext.Component to be added to the outputTarget. Properties of this configuration will be overridden by the applications outputConfig for the tool instance. Tool plugins that want to reuse their output (after being closed by a window or crumb panel) can also provide an Ext.Component instance here, if it was previously created with addOutput.
Returns:Ext.Component The component added to the outputTarget.

Adds output to the tool’s outputTarget. This method is meant to be called and/or overridden by subclasses.

Returns:Boolean true when this tool was deactivated

Deactivates this tool.

:return {Object} Gets the configured tool state. Overwrite in subclasses to return anything other than a copy of the initialConfig property.
Removes all output created by this tool
  • validBoolean is the step’s state valid?
  • dataObject data gathered by this step. Only required if valid is true.

Implementations should call this method to change their valid state


Events in addition to those listed for Ext.util.Observable.


Fired when the tool is activated.

Listener arguments: * tool - gxp.plugins.Tool the activated tool


Fired when the tool is deactivated.

Listener arguments: * tool - gxp.plugins.Tool the deactivated tool