1. #1
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

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

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


    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>

  2. #2
    Sencha User
    Join Date
    Mar 2010
    Location
    Utrecht, NL
    Posts
    15
    Vote Rating
    0
    peterversnee is on a distinguished road

      0  

    Default


    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!
    Last edited by peterversnee; 28 Mar 2011 at 7:10 AM. Reason: typo

  3. #3
    Sencha User
    Join Date
    Mar 2010
    Location
    Utrecht, NL
    Posts
    15
    Vote Rating
    0
    peterversnee is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    2
    Vote Rating
    0
    apdeveloper is on a distinguished road

      0  

    Default problem

    problem


    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:
    Last edited by apdeveloper; 19 Jan 2012 at 12:52 AM. Reason: edited the code example

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    30
    Vote Rating
    0
    mvosantos is on a distinguished road

      0  

    Default It´s not working

    It´s not working


    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?

Similar Threads

  1. Toolbar or Menu with Json items
    By luisparada in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 9 Mar 2011, 1:00 AM
  2. Remove Some items from toolbar and add New Items Not Working
    By shajeerkt in forum Ext GWT: Discussion
    Replies: 3
    Last Post: 15 Feb 2010, 6:28 AM
  3. Scroll down a treepanel using key bindings
    By jeroenooms in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 27 Jul 2009, 12:41 AM
  4. Add Toolbar Items
    By kpohl in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 18 Apr 2008, 4:17 AM
  5. Ext.menu.Menu.items: How to add a handler to existing items?
    By oxi in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 15 Mar 2007, 10:49 PM

Thread Participants: 3

Tags for this Thread