Ext.ux.ToolbarKeyMap Add key bindings to Menu items within a Toolbar

**Animal** · 7 Jun 2010 5:25 AM

Drop this unchanged into examples/<anywhere>

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript">
Ext.ux.ToolbarKeyMap = Ext.extend(Object, (function() {
    var kb,
        owner,
        mappings;

    function addKeyBinding(c) {
        if (kb = c.keyBinding) {
            delete c.keyBinding;
            if (!kb.fn && c.handler) {
                kb.fn = function(k, e) {
                    e.preventDefault();
                    e.stopEvent();
                    c.handler.call(c.scope, c, e);
                }
            }
            mappings.push(kb);
            var t = [];
            if (kb.ctrl) t.push('Ctrl');
            if (kb.alt) t.push('Alt');
            if (kb.shift) t.push('Shift');
            t.push(kb.key.toUpperCase());
            c.hotKey = t.join('+');
            if (c instanceof Ext.menu.Item) {
                c.onRender = c.onRender.createSequence(addMenuItemHotKey);
            } else if ((c instanceof Ext.Button) && (c.showHotKey)) {
                c.onRender = c.onRender.createSequence(addButtonHotKey);
            }
        }
        if ((c instanceof Ext.Button) && c.menu) {
            c.menu.cascade(addKeyBinding);
        }
    }

    function findKeyNavs() {
        delete this.onRender;
        if (owner = this.ownerCt) {
            mappings = [];
            this.cascade(addKeyBinding);
            if (!owner.menuKeyMap) {
                owner.menuKeyMap = new Ext.KeyMap(owner.el, mappings);
                owner.el.dom.tabIndex = 0;
            } else {
                owner.menuKeyMap.addBinding(mappings);
            }
        }
    }

    function addMenuItemHotKey() {
        delete this.onRender;
        this.el.setStyle({
            overflow: 'hidden',
            zoom: 1
        });
        this.el.child('.x-menu-item-text').setStyle({
            'float': 'left'
        });
        this.el.createChild({
            style: {
                padding: '0px 0px 0px 15px',
                float: 'right',
            },
            html: this.hotKey
        });
    }

    function addButtonHotKey() {
        delete this.onRender;
        var p = this.btnEl.up('');
        p.setStyle({
            overflow: 'hidden',
            zoom: 1
        });
        p.up('td').setStyle('text-align', 'left');
        this.btnEl.setStyle('.x-menu-item-text').setStyle({
            'float': 'left'
        });
        p = p.createChild({
                style: {
                padding: '0px 0px 0px 15px',
                float: 'right',
                position: 'relative',
                bottom: Ext.isWebKit ? '-1px' : '-2px'
            },
            html: this.hotKey
        });
    }

    return {
        init: function(toolbar) {
            toolbar.onRender = toolbar.onRender.createSequence(findKeyNavs);
            toolbar.doLayout = toolbar.doLayout.createSequence(findKeyNavs);
        }
    }
})());

function onMenuClick(m, e) {
    alert("Clicked " + m.text);
}

Ext.onReady(function() {

    new Ext.form.FormPanel({
        title: 'Test menu item keyBinding',
        renderTo: document.body,
        style: {
            margin: '10px'
        },
        bodyStyle: {
            padding: '5px'
        },
        height: 400,
        width: 600,
        tbar: {
            plugins: new Ext.ux.ToolbarKeyMap(),
            items: [{
                text: 'Main Menu',
                menu: {
                    items: [{
                        text: 'First option',
                        keyBinding: {
                            key: 'a',
                            ctrl: true
                        },
                        handler: onMenuClick
                    }, {
                        text: 'Second option',
                        keyBinding: {
                            key: 'c',
                            alt: true
                        },
                        handler: onMenuClick
                    }]
                }
            }, {
                text: 'A Button',
                handler: function() {
                    alert("Clicked button");
                },
                keyBinding: {
                    key: 'd',
                    ctrl: true,
                    alt: true
                },
                showHotKey: true // defaults to NOT showing the hotkey name
            }]
        },
        items: {
            xtype: 'textfield',
            fieldLabel: 'Try your hotkeys'
        }
    });
})
</script>
</head>
<body>
</body>
</html>

**peterversnee** · 28 Mar 2011 6:57 AM

Nice! Thanks!

PS: Maybe add something so it loads and directly focuses on the body? The plugin works like a charm after focusing on the body.

Thanks again!

**peterversnee** · 28 Mar 2011 7:17 AM

I noticed that using key: 'F4' isn't an option. Maybe using charCodes is a better idea?

**apdeveloper** · 19 Jan 2012 12:48 AM

I have a problem to use this plugin in project created with Ext Designer and Ext 3.3.2
Because of Ext Designer I must initialize the plugin in extended class

Code:

MyApp.ProjectList = Ext.extend(ProjectListUi, {
...
initComponent: function() {
    ...
    MyApp.ProjectList.superclass.initComponent.call(this);
    ...
    this.btnSearch.keyBinding = {key: 'f',ctrl: true, shift: true};
    this.actionTb = this.filterPanel.getBottomToolbar();
    this.actionTb.initPlugin(new Ext.ux.ToolbarKeyMap());
...

no error during initialization, the ProjectList window opens, but when I press the defined shortcut I get error in Chrome

Code:

[COLOR=red !important]Uncaught TypeError: Cannot call method 'call' of undefined[/COLOR][COLOR=red !important]handler[/COLOR]ext-all-debug.js:10810
[COLOR=red !important]Ext.KeyMap.handleKeyDown[/COLOR]ext-all-debug.js:10866
[COLOR=red !important]h[/COLOR]ext-all-debug.js:5171

**mvosantos** · 8 May 2012 9:32 AM

Hello,
I´m using 4.0.7 version and I´m getting the follow error at firebug:

toolbar.onRender.createSequence is not a function
toolbar.onRender = toolbar.onRender.createSequence(findKeyNavs);

The error is on the lines

Code:

    return {
        init: function(toolbar) {
            console.log(toolbar);
            toolbar.onRender = toolbar.onRender.createSequence(findKeyNavs);
            toolbar.doLayout = toolbar.doLayout.createSequence(findKeyNavs);
        }
    }

In my console.log, toolbar is a "Ext.toolbar.Toolbar" component and createSequente method does not exist...
What am I supposed to do?

Ext.ux.ToolbarKeyMap Add key bindings to Menu items within a Toolbar

Thread Tools

Search Thread

Display

Ext.ux.ToolbarKeyMap Add key bindings to Menu items within a Toolbar

Ext.ux.ToolbarKeyMap Add key bindings to Menu items within a Toolbar

problem

problem

It´s not working

It´s not working

Similar Threads

Toolbar or Menu with Json items

Remove Some items from toolbar and add New Items Not Working

Scroll down a treepanel using key bindings

Add Toolbar Items

Ext.menu.Menu.items: How to add a handler to existing items?

Tags for this Thread