Add action handler to action
<!-- /*! * Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ --> <html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <!-- Revised from demo code in ext3.0.0 --> <body> <script type="text/javascript"> /*! * Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ Ext.onReady(function(){ // The action var action = new Ext.Action({ text: 'Action 1', handler: function(){ Ext.example.msg('Click','You clicked on "Action 1".'); }, iconCls: 'blist' }); var panel = new Ext.Panel({ title: 'Actions', width:600, height:300, bodyStyle: 'padding:10px;', // lazy inline style tbar: [ action, { // <-- Add the action directly to a toolbar text: 'Action Menu', menu: [action] // <-- Add the action directly to a menu } ], items: [ new Ext.Button(action) // <-- Add the action as a button ], renderTo: Ext.getBody() }); var tb = panel.getTopToolbar(); // Buttons added to the toolbar of the Panel above // to test/demo doing group operations with an action tb.add('->', { text: 'Disable', handler: function(){ action.setDisabled(!action.isDisabled()); this.setText(action.isDisabled() ? 'Enable' : 'Disable'); } }, { text: 'Change Text', handler: function(){ Ext.Msg.prompt('Enter Text', 'Enter new text for Action 1:', function(btn, text){ if(btn == 'ok' && text){ action.setText(text); action.setHandler(function(){ Ext.example.msg('Click','You clicked on "'+text+'".'); }); } }); } }, { text: 'Change Icon', handler: function(){ action.setIconClass(action.getIconClass() == 'blist' ? 'bmenu' : 'blist'); } }); tb.doLayout(); }); </script> </script> </body> </html>
1. | Disable action to disable a button | ||
2. | Change action text | ||
3. | Update action icon | ||
4. | Create Ext.Action | ||
5. | Add action to form button | ||
6. | Use action to construct UI controls |