X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/menu/menus.js

diff --git a/examples/menu/menus.js b/examples/menu/menus.js
index b4f0141c..aa5faffd 100644
--- a/examples/menu/menus.js
+++ b/examples/menu/menus.js
@@ -1,46 +1,42 @@
-/*!
- * Ext JS Library 3.0.0
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
+Ext.require(['*']);
+
+// TODO: The "Users" menu containing buttons is completely screwed: ButtonGroup needs work.
+
 Ext.onReady(function(){
     Ext.QuickTips.init();
 
-    // Menus can be prebuilt and passed by reference
-    var dateMenu = new Ext.menu.DateMenu({
+    var dateMenu = Ext.create('Ext.menu.DatePicker', {
         handler: function(dp, date){
-            Ext.example.msg('Date Selected', 'You chose {0}.', date.format('M j, Y'));
+            Ext.example.msg('Date Selected', 'You choose {0}.', Ext.Date.format(date, 'M j, Y'));
+
         }
     });
 
-    var colorMenu = new Ext.menu.ColorMenu({
+    var colorMenu = Ext.create('Ext.menu.ColorPicker', {
         handler: function(cm, color){
-            Ext.example.msg('Color Selected', 'You chose {0}.', color);
+            Ext.example.msg('Color Selected', '<span style="color:#' + color + ';">You choose {0}.</span>', color);
         }
     });
-    
-    var store = new Ext.data.ArrayStore({
+
+    var store = Ext.create('Ext.data.ArrayStore', {
         fields: ['abbr', 'state'],
-        data : Ext.exampledata.states // from states.js
+        data : Ext.example.states
     });
 
-    var combo = new Ext.form.ComboBox({
+    var combo = Ext.create('Ext.form.field.ComboBox', {
+        hideLabel: true,
         store: store,
         displayField: 'state',
         typeAhead: true,
-        mode: 'local',
+        queryMode: 'local',
         triggerAction: 'all',
         emptyText: 'Select a state...',
         selectOnFocus: true,
         width: 135,
-        getListParent: function() {
-            return this.el.up('.x-menu');
-        },
         iconCls: 'no-icon'
     });
 
-    var menu = new Ext.menu.Menu({
+    var menu = Ext.create('Ext.menu.Menu', {
         id: 'mainMenu',
         style: {
             overflow: 'visible'     // For the Combo popup
@@ -80,26 +76,64 @@ Ext.onReady(function(){
                         }
                     ]
                 }
-            },{
-                text: 'Choose a Date',
-                iconCls: 'calendar',
-                menu: dateMenu // <-- submenu by reference
-            },{
-                text: 'Choose a Color',
-                menu: colorMenu // <-- submenu by reference
-            }
+           },{
+               text: 'Choose a Date',
+               iconCls: 'calendar',
+               menu: dateMenu // <-- submenu by reference
+           },{
+               text: 'Choose a Color',
+               menu: colorMenu // <-- submenu by reference
+           }
         ]
     });
 
-    var tb = new Ext.Toolbar();
+    var tb = Ext.create('Ext.toolbar.Toolbar');
+    tb.suspendLayout = true;
     tb.render('toolbar');
 
     tb.add({
             text:'Button w/ Menu',
             iconCls: 'bmenu',  // <-- icon
             menu: menu  // assign menu by instance
-        }, 
-        new Ext.Toolbar.SplitButton({
+        }, {
+            text: 'Users',
+            iconCls: 'user',
+            menu: {
+                xtype: 'menu',
+                plain: true,
+                items: {
+                    xtype: 'buttongroup',
+                    title: 'User options',
+                    columns: 2,
+                    defaults: {
+                        xtype: 'button',
+                        scale: 'large',
+                        iconAlign: 'left'
+                    },
+                    items: [{
+                        text: 'User<br/>manager',
+                        iconCls: 'edit',
+                        width: 90
+                    },{
+                        iconCls: 'add',
+                        width: 'auto',
+                        tooltip: 'Add user',
+                        width: 40
+                    },{
+                        colspan: 2,
+                        text: 'Import',
+                        scale: 'small',
+                        width: 130
+                    },{
+                        colspan: 2,
+                        text: 'Who is online?',
+                        scale: 'small',
+                        width: 130
+                    }]
+                }
+            }
+        },
+        Ext.create('Ext.button.Split', {
             text: 'Split Button',
             handler: onButtonClick,
             tooltip: {text:'This is a an example QuickTip for a toolbar item', title:'Tip Title'},
@@ -116,8 +150,9 @@ Ext.onReady(function(){
                     text: 'Pick a Color',
                     handler: onItemClick,
                     menu: {
+                        showSeparator: false,
                         items: [
-                            new Ext.ColorPalette({
+                            Ext.create('Ext.ColorPalette', {
                                 listeners: {
                                     select: function(cp, color){
                                         Ext.example.msg('Color Selected', 'You chose {0}.', color);
@@ -142,7 +177,8 @@ Ext.onReady(function(){
         pressed: true
     });
 
-    menu.addSeparator();
+    menu.add(' ');
+
     // Menus have a rich api for
     // adding and removing elements dynamically
     var item = menu.add({
@@ -164,13 +200,17 @@ Ext.onReady(function(){
     tb.add('-', {
         icon: 'list-items.gif', // icons can also be specified inline
         cls: 'x-btn-icon',
-        tooltip: '<b>Quick Tips</b><br/>Icon only button with tooltip'
+        tooltip: '<b>Quick Tips</b><br/>Icon only button with tooltip',
+        handler: function(){
+            Ext.example.msg('Button Click','You clicked the "icon only" button.');
+        }
     }, '-');
-    
-    var scrollMenu = new Ext.menu.Menu();
+
+    var scrollMenu = Ext.create('Ext.menu.Menu');
     for (var i = 0; i < 50; ++i){
         scrollMenu.add({
-            text: 'Item ' + (i + 1)
+            text: 'Item ' + (i + 1),
+            handler: onItemClick
         });
     }
     // scrollable menu
@@ -181,8 +221,18 @@ Ext.onReady(function(){
         menu: scrollMenu
     });
 
+    tb.add({
+        text: 'Link',
+        url: 'http://www.google.com/search',
+        baseParams: {
+            q: 'html+anchor+tag'
+        },
+        tooltip: 'This is a link. You can right click. You can see where it will take you'
+    });
+
     // add a combobox to the toolbar
-    var combo = new Ext.form.ComboBox({
+    var combo = Ext.create('Ext.form.field.ComboBox', {
+        hideLabel: true,
         store: store,
         displayField: 'state',
         typeAhead: true,
@@ -192,8 +242,8 @@ Ext.onReady(function(){
         selectOnFocus:true,
         width:135
     });
-    tb.addField(combo);
-
+    tb.add(combo);
+    tb.suspendLayout = false;
     tb.doLayout();
 
     // functions to display feedback
@@ -213,4 +263,4 @@ Ext.onReady(function(){
         Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);
     }
 
-});
\ No newline at end of file
+});