/ext-4.1.0_b3/examples/menu/actions.js
JavaScript | 65 lines | 59 code | 3 blank | 3 comment | 5 complexity | bafd216305767b0103be87095857dbed MD5 | raw file
1Ext.require([
2 'Ext.panel.Panel',
3 'Ext.Action',
4 'Ext.button.Button',
5 'Ext.window.MessageBox'
6]);
7
8Ext.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});