Results 1 to 3 of 3

Thread: Multibrowser problem with listener

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    3
    Vote Rating
    0
      0  

    Default Multibrowser problem with listener

    Hello

    I have defined a custom panel and I want add default listeners.
    This is working in IE, but not in Chrome and Firefox.
    On contextMenu I get the alert, but not on key down.
    Any help? Thanks

    Code:
    
    Ext.define('Ext.ux.myPanel', {
        extend: 'Ext.panel.Panel'
        
        , alias: 'widget.myPanel'
    
    
        , initComponent: function () {
            this.listeners.scope = this;
            this.callParent();
        }
    
    
        , listeners: {
            scope: ''
    
    
            , keydown: {
                element: 'el',
                fn: function (iEvent, iElement) {
                    var keyCode = iEvent.getKey();
                    alert(keyCode);
                }
            }
    
    
            , contextmenu: {
                element: 'el', 
                fn: function () {
                    alert('contextmenu'); 
                }
            }
    
    
        }
    
    
    
    
        , onRender: function (ct, position) {
            var me = this;
            // Render internal structure
            me.callParent(arguments);
           
            //my render....
        }
    
    
    });

  2. #2
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,751
    Answers
    130
    Vote Rating
    129
      0  

    Default

    hi,

    first a general hint: only add primitives directly as configs, otherwise these objects / arrays / functions will get added on prototype level so that they get shared for all instances.

    for example use the initComponent method and add them there like this.listeners = ... or use Ext.apply(this, {...});

    you are delegating the events to the dom node of the container, which can cause problems since keyevents will only trigger if this dom node has focus. you could also add them to the panel.body, but for most usecases it makes more sense to add them to the children (like input fields).

    Ext.window.Window uses listeners for the ESC key, calling a method that is defined in panel:
    Code:
                var keyMap = me.getKeyMap();
                keyMap.on(27, me.onEsc, me);
    you could use a syntax like this as well, e.g. inside the initComponent under the callParent() call.
    Best regards
    Tobias Uhlig

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    3
    Vote Rating
    0
      0  

    Default

    Thanks

    But I have the same behavior: IE ok, the others, fail

    I have add this

    Code:
    , afterRender: function () {
            var me = this, keyMap;
    
    
            me.callParent();
    
    
            keyMap = me.getKeyMap();
            keyMap.on(40, me.downOneRowScroll, me);
            //keyMap.disable();
    
    
        }
    
    
        , getKeyMap: function () {
            return this.keyMap || (this.keyMap = new Ext.util.KeyMap(Ext.apply({
                target: this.el
            }, this.keys)));
        }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •