examples/toolbar/overflow.js

   1 Ext.require(['*']);
   2 Ext.onReady(function(){
   3
   4     var handleAction = function(action){
   5         Ext.example.msg('<b>Action</b>', 'You clicked "' + action + '"');
   6     };
   7
   8     var colorMenu = Ext.create('Ext.menu.ColorPicker', {
   9         handler: function(cm, color){
  10             Ext.example.msg('Color Selected', '<span style="color:#' + color + ';">You choose {0}.</span>', color);
  11         }
  12     });
  13
  14     Ext.create('Ext.Window', {
  15         title: 'Standard',
  16         closable: false,
  17         height:250,
  18         width: 500,
  19         bodyStyle: 'padding:10px',
  20         contentEl: 'content',
  21         autoScroll: true,
  22         tbar: Ext.create('Ext.toolbar.Toolbar', {
  23             layout: {
  24                 overflowHandler: 'Menu'
  25             },
  26             items: [{
  27                 xtype:'splitbutton',
  28                 text: 'Menu Button',
  29                 iconCls: 'add16',
  30                 handler: Ext.Function.pass(handleAction, 'Menu Button'),
  31                 menu: [{text: 'Menu Item 1', handler: Ext.Function.pass(handleAction, 'Menu Item 1')}]
  32             },'-',{
  33                 xtype:'splitbutton',
  34                 text: 'Cut',
  35                 iconCls: 'add16',
  36                 handler: Ext.Function.pass(handleAction, 'Cut'),
  37                 menu: [{text: 'Cut menu', handler: Ext.Function.pass(handleAction, 'Cut menu')}]
  38             },{
  39                 text: 'Copy',
  40                 iconCls: 'add16',
  41                 handler: Ext.Function.pass(handleAction, 'Copy')
  42             },{
  43                 text: 'Paste',
  44                 iconCls: 'add16',
  45                 menu: [{text: 'Paste menu', handler: Ext.Function.pass(handleAction, 'Paste menu')}]
  46             },'-',{
  47                 text: 'Format',
  48                 iconCls: 'add16',
  49                 handler: Ext.Function.pass(handleAction, 'Format')
  50             },'->',{
  51                 text: 'Right',
  52                 iconCls: 'add16',
  53                 handler: Ext.Function.pass(handleAction, 'Right')
  54             }, {
  55                 text: 'Choose a Color',
  56                 menu: colorMenu // <-- submenu by reference
  57             }]
  58         })
  59     }).show();
  60 });