Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / actions.html
1 <html>\r
2 <head>\r
3   <title>The source code</title>\r
4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
6 </head>\r
7 <body  onload="prettyPrint();">\r
8     <pre class="prettyprint lang-js">Ext.onReady(function(){
9     // The action
10     var action = new Ext.Action({
11         text: 'Action 1',
12         handler: function(){
13             Ext.example.msg('Click','You clicked on "Action 1".');
14         },
15         iconCls: 'blist'
16     });
17
18
19     var panel = new Ext.Panel({
20         title: 'Actions',
21         width:600,
22         height:300,
23         bodyStyle: 'padding:10px;',     // lazy inline style
24
25         tbar: [
26             action, {                   // <-- Add the action directly to a toolbar
27                 text: 'Action Menu',
28                 menu: [action]          // <-- Add the action directly to a menu
29             }
30         ],
31
32         items: [
33            new Ext.Button(action)       // <-- Add the action as a button
34         ],
35
36         renderTo: Ext.getBody()
37     });
38
39     var tb = panel.getTopToolbar();
40     // Buttons added to the toolbar of the Panel above
41     // to test/demo doing group operations with an action
42     tb.add('->', {
43         text: 'Disable',
44         handler: function(){
45             action.setDisabled(!action.isDisabled());
46             this.setText(action.isDisabled() ? 'Enable' : 'Disable');
47         }
48     }, {
49         text: 'Change Text',
50         handler: function(){
51             Ext.Msg.prompt('Enter Text', 'Enter new text for Action 1:', function(btn, text){
52                 if(btn == 'ok' && text){
53                     action.setText(text);
54                     action.setHandler(function(){
55                         Ext.example.msg('Click','You clicked on "'+text+'".');
56                     });
57                 }
58             });
59         }
60     }, {
61         text: 'Change Icon',
62         handler: function(){
63             action.setIconClass(action.getIconClass() == 'blist' ? 'bmenu' : 'blist');
64         }
65     });
66     tb.doLayout();
67 });</pre>    \r
68 </body>\r
69 </html>