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 4bef642..0095f14 100644 (file)
--- a/examples/toolbar/overflow.js
+++ b/examples/toolbar/overflow.js
@@ -1,16 +1,17 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
+Ext.require(['*']);
 Ext.onReady(function(){
 
     var handleAction = function(action){
-        Ext.example.msg('<b>Action</b>', 'You clicked "'+action+'"');
+        Ext.example.msg('<b>Action</b>', 'You clicked "' + action + '"');
     };
-    
-    var p = new Ext.Window({
+
+    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,
@@ -18,39 +19,42 @@ Ext.onReady(function(){
         bodyStyle: 'padding:10px',
         contentEl: 'content',
         autoScroll: true,
-        tbar: new Ext.Toolbar({
-            enableOverflow: true,
+        tbar: Ext.create('Ext.toolbar.Toolbar', {
+            layout: {
+                overflowHandler: 'Menu'
+            },
             items: [{
                 xtype:'splitbutton',
                 text: 'Menu Button',
                 iconCls: 'add16',
-                handler: handleAction.createCallback('Menu Button'),
-                menu: [{text: 'Menu Item 1', handler: handleAction.createCallback('Menu Item 1')}]
+                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: handleAction.createCallback('Cut'),
-                menu: [{text: 'Cut menu', handler: handleAction.createCallback('Cut menu')}]
+                handler: Ext.Function.pass(handleAction, 'Cut'),
+                menu: [{text: 'Cut menu', handler: Ext.Function.pass(handleAction, 'Cut menu')}]
             },{
                 text: 'Copy',
                 iconCls: 'add16',
-                handler: handleAction.createCallback('Copy')
+                handler: Ext.Function.pass(handleAction, 'Copy')
             },{
                 text: 'Paste',
                 iconCls: 'add16',
-                menu: [{text: 'Paste menu', handler: handleAction.createCallback('Paste menu')}]
+                menu: [{text: 'Paste menu', handler: Ext.Function.pass(handleAction, 'Paste menu')}]
             },'-',{
                 text: 'Format',
                 iconCls: 'add16',
-                handler: handleAction.createCallback('Format')
+                handler: Ext.Function.pass(handleAction, 'Format')
             },'->',{
                 text: 'Right',
                 iconCls: 'add16',
-                handler: handleAction.createCallback('Right')
+                handler: Ext.Function.pass(handleAction, 'Right')
+            }, {
+                text: 'Choose a Color',
+                menu: colorMenu // <-- submenu by reference
             }]
         })
-    });
-    p.show();
-
-});
\ No newline at end of file
+    }).show();
+});