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