Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / toolbar / overflow.js

diff --git a/examples/toolbar/overflow.js b/examples/toolbar/overflow.js
index 60c3dc5..0095f14 100644 (file)
--- a/examples/toolbar/overflow.js
+++ b/examples/toolbar/overflow.js
@@ -1,53 +1,60 @@
-/*!
- * Ext JS Library 3.1.0
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-Ext.onReady(function(){\r
-\r
-    var handleAction = function(action){\r
-        Ext.example.msg('<b>Action</b>', 'You clicked "'+action+'"');\r
-    };\r
-    \r
-    var p = new Ext.Window({\r
-        title: 'Standard',\r
-        closable: false,\r
-        height:250,\r
-        width: 500,\r
-        bodyStyle: 'padding:10px',\r
-        contentEl: 'content',\r
-        autoScroll: true,\r
-        tbar: [{\r
-            xtype:'splitbutton',\r
-            text: 'Menu Button',\r
-            iconCls: 'add16',\r
-            handler: handleAction.createCallback('Menu Button'),\r
-            menu: [{text: 'Menu Item 1', handler: handleAction.createCallback('Menu Item 1')}]\r
-        },'-',{\r
-            xtype:'splitbutton',\r
-            text: 'Cut',\r
-            iconCls: 'add16',\r
-            handler: handleAction.createCallback('Cut'),\r
-            menu: [{text: 'Cut menu', handler: handleAction.createCallback('Cut menu')}]\r
-        },{\r
-            text: 'Copy',\r
-            iconCls: 'add16',\r
-            handler: handleAction.createCallback('Copy')\r
-        },{\r
-            text: 'Paste',\r
-            iconCls: 'add16',\r
-            menu: [{text: 'Paste menu', handler: handleAction.createCallback('Paste menu')}]\r
-        },'-',{\r
-            text: 'Format',\r
-            iconCls: 'add16',\r
-            handler: handleAction.createCallback('Format')\r
-        },'->',{\r
-            text: 'Right',\r
-            iconCls: 'add16',\r
-            handler: handleAction.createCallback('Right')\r
-        }]\r
-    });\r
-    p.show();\r
-\r
-});
\ No newline at end of file
+Ext.require(['*']);
+Ext.onReady(function(){
+
+    var handleAction = function(action){
+        Ext.example.msg('<b>Action</b>', 'You clicked "' + action + '"');
+    };
+
+    var colorMenu = Ext.create('Ext.menu.ColorPicker', {
+        handler: function(cm, color){
+            Ext.example.msg('Color Selected', '<span style="color:#' + color + ';">You choose {0}.</span>', color);
+        }
+    });
+
+    Ext.create('Ext.Window', {
+        title: 'Standard',
+        closable: false,
+        height:250,
+        width: 500,
+        bodyStyle: 'padding:10px',
+        contentEl: 'content',
+        autoScroll: true,
+        tbar: Ext.create('Ext.toolbar.Toolbar', {
+            layout: {
+                overflowHandler: 'Menu'
+            },
+            items: [{
+                xtype:'splitbutton',
+                text: 'Menu Button',
+                iconCls: 'add16',
+                handler: Ext.Function.pass(handleAction, 'Menu Button'),
+                menu: [{text: 'Menu Item 1', handler: Ext.Function.pass(handleAction, 'Menu Item 1')}]
+            },'-',{
+                xtype:'splitbutton',
+                text: 'Cut',
+                iconCls: 'add16',
+                handler: Ext.Function.pass(handleAction, 'Cut'),
+                menu: [{text: 'Cut menu', handler: Ext.Function.pass(handleAction, 'Cut menu')}]
+            },{
+                text: 'Copy',
+                iconCls: 'add16',
+                handler: Ext.Function.pass(handleAction, 'Copy')
+            },{
+                text: 'Paste',
+                iconCls: 'add16',
+                menu: [{text: 'Paste menu', handler: Ext.Function.pass(handleAction, 'Paste menu')}]
+            },'-',{
+                text: 'Format',
+                iconCls: 'add16',
+                handler: Ext.Function.pass(handleAction, 'Format')
+            },'->',{
+                text: 'Right',
+                iconCls: 'add16',
+                handler: Ext.Function.pass(handleAction, 'Right')
+            }, {
+                text: 'Choose a Color',
+                menu: colorMenu // <-- submenu by reference
+            }]
+        })
+    }).show();
+});