loading table of contents...

7.9.3. Adding a Button with a Custom Action

The previous sections described how the predefined actions are wrapped in buttons and added to a toolbar. However, sometimes it is necessary to develop a custom action, for example to open a special window or to start a wizard. In Section 5.1.4, “Actions” you will find a more detailed explanation of actions, but the recipe shown here should be enough in many cases.

All actions inherit from ext.Action. For example, an action mypackage.MyAction might look like this:

package mypackage {
import ext.Action;
import mypackage.config.myAction;

public class MyAction extends Action {
  private var foo:String;

  /**
   * @param config
   */
  public function MyAction(config:myAction = null) {
    super(Ext.apply({handler: doAction}, config));
    foo = config.foo;
    ...
  }

  private function doAction():void {
    ...
  }
  ...
}
}

Example 7.34. Creating a custom action


It uses the complementing myAction configuration class:

package mypackage.config {
import ext.config.action;

[ExtConfig(target="mypackage.MyAction")]
public class myAction extends action {
  private var foo:String;

  public function myAction(config:Object = null) {
    super(config || {});
  }

  /**
   * the foo
   */
  public native function get foo():String;
  /**
   * @private
   */
  public native function set foo(value:String):void;
  ...
}
}

Example 7.35. Creating a custom action configuration class


You can access this class from ActionScript and (more commonly) from EXML. Like always in EXML, the name of the configuration class determines the element name and its package is used as the namespace URI suffix:

...
<button>
  <baseAction>
    <mp:myAction text="do something"
                 foo="bar"/>
  </baseAction>
</button>
...

Example 7.36. Using a custom action


For example, such a button with a base action might by added to the Favorites toolbar or the Actions toolbar as shown in the previous sections. The previous fragment assumes that you have defined the mp namespace so that it references the module containing mypackage (exml:mypackage.config).

Note that you can use all configuration parameters inherited from ext.action, here text.

Contrary to pure Ext JS, EXML supports configuring a component with properties and an action at the same time by merging the component configuration and the action configuration. If both the component and the action declare a configuration property, the component configuration property value is used.