examples/menu/actions.js

   1 Ext.require([
   2     'Ext.panel.Panel',
   3     'Ext.Action',
   4     'Ext.button.Button',
   5     'Ext.window.MessageBox'
   6 ]);
   7
   8 Ext.onReady(function(){
   9     var action = Ext.create('Ext.Action', {
  10         text: 'Action 1',
  11         iconCls: 'icon-add',
  12         handler: function(){
  13             Ext.example.msg('Click', 'You clicked on "Action 1".');
  14         }
  15     });
  16
  17      var panel = Ext.create('Ext.panel.Panel', {
  18         title: 'Actions',
  19         renderTo: document.body,
  20         width: 600,
  21         height: 300,
  22         bodyPadding: 10,
  23         dockedItems: {
  24             itemId: 'toolbar',
  25             xtype: 'toolbar',
  26             items: [
  27                 action, // Add the action directly to a toolbar
  28                 {
  29                     text: 'Action menu',
  30                     menu: [action] // Add the action directly to a menu
  31                 }
  32             ]
  33         },
  34         items: Ext.create('Ext.button.Button', action)       // Add the action as a button
  35     });
  36
  37     /*
  38      * Add toolbar items dynamically after creation
  39      */
  40     var toolbar = panel.child('#toolbar');
  41     toolbar.add('->', {
  42         text: 'Disable',
  43         handler: function(){
  44             action.setDisabled(!action.isDisabled());
  45             this.setText(action.isDisabled() ? 'Enable' : 'Disable');
  46         }
  47     }, {
  48         text: 'Change Text',
  49         handler: function(){
  50             Ext.Msg.prompt('Enter Text', 'Enter new text for Action 1:', function(btn, text){
  51                 if(btn == 'ok' && text){
  52                     action.setText(text);
  53                     action.setHandler(function(){
  54                         Ext.example.msg('Click','You clicked on "'+text+'".');
  55                     });
  56                 }
  57             });
  58         }
  59     }, {
  60         text: 'Change Icon',
  61         handler: function(){
  62             action.setIconCls(action.getIconCls() == 'icon-add' ? 'icon-edit' : 'icon-add');
  63         }
  64     });
  65 });