examples/menu/actions.js

   1 /*!
   2  * Ext JS Library 3.2.0
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.onReady(function(){
   8     // The action
   9     var action = new Ext.Action({
  10         text: 'Action 1',
  11         handler: function(){
  12             Ext.example.msg('Click','You clicked on "Action 1".');
  13         },
  14         iconCls: 'blist'
  15     });
  16
  17
  18     var panel = new Ext.Panel({
  19         title: 'Actions',
  20         width:600,
  21         height:300,
  22         bodyStyle: 'padding:10px;',     // lazy inline style
  23
  24         tbar: [
  25             action, {                   // <-- Add the action directly to a toolbar
  26                 text: 'Action Menu',
  27                 menu: [action]          // <-- Add the action directly to a menu
  28             }
  29         ],
  30
  31         items: [
  32            new Ext.Button(action)       // <-- Add the action as a button
  33         ],
  34
  35         renderTo: Ext.getBody()
  36     });
  37
  38     var tb = panel.getTopToolbar();
  39     // Buttons added to the toolbar of the Panel above
  40     // to test/demo doing group operations with an action
  41     tb.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.setIconClass(action.getIconClass() == 'blist' ? 'bmenu' : 'blist');
  63         }
  64     });
  65     tb.doLayout();
  66 });