Results 1 to 6 of 6

Thread: Manually firing DOM events

  1. #1

    Default Manually firing DOM events

    I've been unable to figure out how to manually fire DOM events. Here, for example, is my attempt to fire the "focus" event for a textfield:

    Code:
    Ext.getCmp('sampleFormPanel').getComponent('sampleForm').getComponent('sampleTextField').fireEvent('focus', this)
    Using firebug I have confirmed that my component path is correct, narrowing down my issue to the fireEvent(...) method.

    I'm determining whether or not the event has been fired in the following way:

    Code:
    xtype: 'textfield',
    itemId: 'sampleTextField',
    plugins: [
        new Ext.DomObserver ({
            focus: function(evt, comp) {
                // show alert
            }
    	scope: this
    })]
    The alert does appear when I manually set focus to the textfield using the mouse, again narrowing down my issue to the fireEvent method. I've scoured the net for a good example of firing a DOM event via the fireEvent method, but have come up empty.

    Any help is appreciated.

    EDIT: I should also mention that I've tried the following, without success:

    Code:
    fireEvent('focus')
    fireEvent('focus', this, this._activeElement)
    The bottom line is that I don't know what the fireEvent(...) method is expecting for parameters, namely DOM event parameters.

  2. #2
    Touch Premium Member letssurf's Avatar
    Join Date
    Jan 2008
    Location
    Northampton, UK
    Posts
    88

    Default

    Take a look at http://www.extjs.com/deploy/dev/docs...form.TextField
    There's a focus() method.

    Something like
    Code:
    Ext.getCmp('sampleFormPanel').getComponent('sampleForm').getComponent('sampleTextField').focus();
    should work, as long as it's been rendered.
    James Demspter

    the one constant in life, is change.

  3. #3

    Default

    Take a look at http://www.extjs.com/deploy/dev/docs...form.TextField
    There's a focus() method.

    Something like
    Code:
    Ext.getCmp('sampleFormPanel').getComponent('sampleForm').getComponent('sampleTextField').focus();
    should work, as long as it's been rendered.
    That does work, but my requirement is that I can fire any DOM event, such as "click" which doesn't have a ready made method for being fired.

  4. #4
    Touch Premium Member letssurf's Avatar
    Join Date
    Jan 2008
    Location
    Northampton, UK
    Posts
    88

    Default

    I don't think there is a way to fire events directly on the dom from ExtJs.
    I've never found the need to either so not 100% sure.

    Why would you need to fire events directly on the dom element? Most if not all Ext objects extend Ext.util.Observable which allow you to add listeners to the Ext component.

    There is a section named Manually firing events at http://www.howtocreate.co.uk/tutoria...ript/domevents which you might find useful if you need to fire events on the dom element.
    James Demspter

    the one constant in life, is change.

  5. #5
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Could you be thinking of something like this?

    Code:
    Ext.override(Ext.Element, {
        fireEvent: (function() {
            var HTMLEvts = /^(scroll|resize|load|unload|abort|error)$/,
                mouseEvts = /^(click|dblclick|mousedown|mouseup|mouseover|mouseout|contextmenu)$/,
                UIEvts = /^(focus|blur|select|change|reset|keypress|keydown|keyup)$/,
                onPref = /^on/;
    
            return Ext.isIE ? function(e) {
                e = e.toLowerCase();
                if (!onPref.test(e)) {
                    e = 'on' + e;
                }
                this.dom.fireEvent(e, document.createEventObject());
            } : function(e) {
                e = e.toLowerCase();
                e.replace(onPref, '');
                var evt;
                if (mouseEvts.test(e)) {
                    var b = this.getBox(),
                        x = b.x + b.width / 2,
                        y = b.y + b.height / 2;
                    evt = document.createEvent("MouseEvents");
                    evt.initMouseEvent(e, true, true, window, (e=='dblclick')?2:1, x, y, x, y, false, false, false, false, 0, null);
                } else if (UIEvts.test(e)) {
                    evt = document.createEvent("UIEvents");
                    evt.initUIEvent(e, true, true, window, 0);
                } else if (HTMLEvts.test(e)) {
                    evt = document.createEvent("HTMLEvents");
                    evt.initEvent(e, true, true);
                }
                if (evt) {
                    this.dom.dispatchEvent(evt);
                }
            }
        })()
    });

  6. #6

    Default

    Yes, thank you letssurf and Animal. That was exactly what I needed: a combination of the DOM element encapsulated by the Ext Element and the dispatchEvent method.

Posting Permissions

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