1. #1
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,499
    Vote Rating
    47
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi