add extjs 6.0.1 sources

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

Ext.require(['Ext.window.Window', 'Ext.toolbar.Toolbar', 'Ext.menu.ColorPicker', 'Ext.form.field.Date']);\r
Ext.onReady(function(){\r
\r
    var handleAction = function(action){\r
        Ext.example.msg('<b>Action</b>', 'You clicked "' + action + '"');\r
    };\r
\r
    var colorMenu = Ext.create('Ext.menu.ColorPicker', {\r
        handler: function(cm, color){\r
            Ext.example.msg('Color Selected', '<span style="color:#' + color + ';">You choose {0}.</span>', color);\r
        }\r
    });\r
    \r
    var showDate = function(d, value) {\r
        Ext.example.msg('<b>Action date</b>', 'You picked ' + Ext.Date.format(value, d.format));\r
    };\r
    \r
    var fromPicker = false;\r
\r
    Ext.create('Ext.window.Window', {\r
        title: 'Standard',\r
        closable: false,\r
        height:250,\r
        width: 500,\r
        bodyStyle: 'padding:10px',\r
        contentEl: 'content',\r
        scrollable: true,\r
        tbar: Ext.create('Ext.toolbar.Toolbar', {\r
            layout: {\r
                overflowHandler: 'Menu'\r
            },\r
            items: [{\r
                xtype:'splitbutton',\r
                text: 'Menu Button',\r
                iconCls: 'add16',\r
                handler: Ext.Function.pass(handleAction, 'Menu Button'),\r
                menu: [{text: 'Menu Item 1', handler: Ext.Function.pass(handleAction, 'Menu Item 1')}]\r
            },'-',{\r
                xtype:'splitbutton',\r
                text: 'Cut',\r
                iconCls: 'add16',\r
                handler: Ext.Function.pass(handleAction, 'Cut'),\r
                menu: [{text: 'Cut menu', handler: Ext.Function.pass(handleAction, 'Cut menu')}]\r
            },{\r
                text: 'Copy',\r
                iconCls: 'add16',\r
                handler: Ext.Function.pass(handleAction, 'Copy')\r
            },{\r
                text: 'Paste',\r
                iconCls: 'add16',\r
                menu: [{text: 'Paste menu', handler: Ext.Function.pass(handleAction, 'Paste menu')}]\r
            },'-',{\r
                text: 'Format',\r
                iconCls: 'add16',\r
                handler: Ext.Function.pass(handleAction, 'Format')\r
            },'->', {\r
                fieldLabel: 'Action',\r
                labelWidth: 70,\r
                width: 180,\r
                xtype: 'datefield',\r
                labelSeparator: '',\r
                enableKeyEvents: true,\r
                listeners: {\r
                    expand: function(){\r
                        fromPicker = true;\r
                    },\r
                    collapse: function(){\r
                        fromPicker = false;  \r
                    },\r
                    change: function(d, newVal, oldVal) {\r
                        if (fromPicker || !d.isVisible()) {\r
                            showDate(d, newVal);\r
                        }\r
                    },\r
                    keypress: {\r
                        buffer: 500,\r
                        fn: function(field){\r
                            var value = field.getValue();\r
                            if (value !== null && field.isValid()) {\r
                                showDate(field, value);\r
                            }\r
                        }\r
                    }\r
                }\r
            }, {\r
                text: 'Sell',\r
                iconCls: 'money-down',\r
                enableToggle: true,\r
                toggleHandler: function(button, pressed) {\r
                    Ext.example.msg('<b>Action</b>', 'Right ToggleButton ' + (pressed ? 'Buy' : 'Sell'));\r
                    button.setText(pressed ? 'Buy' : 'Sell');\r
                    button.setIconCls(pressed ? 'money-up' : 'money-down')\r
                }\r
            }, {\r
                text: 'Choose a Color',\r
                menu: colorMenu // <-- submenu by reference\r
            }]\r
        })\r
    }).show();\r
});\r