1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    126
    Answers
    1
    Vote Rating
    0
    varunach is on a distinguished road

      0  

    Default Answered: Intercepting Component events

    Answered: Intercepting Component events


    Hi,

    I am implementing a tooltip based help for my components. So it goes like this : when a user clicks on help, a custom tooltip is shown for each important part of the component one at a time. The tooltip has 3 buttons, "Prev", "Next" and "Finish". As the names suggest, prev button will show the prev tooltip, next will show the next and finish will end the help.

    Now what I want is that while the help is being shown, either :
    a) All sub components, html etc should be disabled
    b) Events fired by these should be swallowed.

    I want these so that the user can complete the help without clicking on something and activating some other component unknowingly.

    I tried the following but they don't work:

    Code:
    els = this.query('component');
    for (i = 0; i < els.length; i++) {
       els[i].suspendEvents();
    }
    Code:
    els = Ext.dom.Query.select("*", this.getEl().dom);
    for (i = 0; i < els.length; i++) {
       els[i].disabled = true;
    }
    Above 2 don't work at all. Below works on some, but doesn't work on some. Example: The help button is in a menu, so after the following code runs, the menu remains open.

    Code:
    var originalFireEvent = Ext.util.Observable.prototype.fireEvent
    Ext.util.Observable.prototype.fireEvent = function(){
    return false;
    }
    /* after help finishes
    **/
    Ext.util.Observable.prototype.fireEvent = originalFireEvent;
    What do I do to suspend or swallow all events of the children of a parent component.

  2. Something like this work?

    Code:
    Ext.create('Ext.window.Window', {
        title: 'Hello',
        height: 200,
        width: 400,
        layout: 'fit',
        items: {  // Let's put an empty grid in just to illustrate fit layout
            xtype: 'panel',
            border: false
            , items: [{
                xtype: 'button'
                , text: 'Button A'
                , handler: function () { console.log('Button A'); }
            }]
        }
        , buttons: [{
            text: 'Prevent Events'
            , enableToggle: true
            , toggleHandler: function (btn, state) {
                var panel = btn.up('window').down('panel')
                    , components = panel.query('component');
                
                if (state) {
                    panel.el.mask();
                    //Ext.fly(panel.el.query('.x-mask')[0]).applyStyles({opacity: 0});
                    Ext.fly(panel.el.query('.x-mask')[0]).setOpacity(0);
                } else {
                    panel.el.unmask();
                }
            }
        }]
    }).show();

  3. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,160
    Answers
    409
    Vote Rating
    190
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      1  

    Default


    Something like this work?

    Code:
    Ext.create('Ext.window.Window', {
        title: 'Hello',
        height: 200,
        width: 400,
        layout: 'fit',
        items: {  // Let's put an empty grid in just to illustrate fit layout
            xtype: 'panel',
            border: false
            , items: [{
                xtype: 'button'
                , text: 'Button A'
                , handler: function () { console.log('Button A'); }
            }]
        }
        , buttons: [{
            text: 'Prevent Events'
            , enableToggle: true
            , toggleHandler: function (btn, state) {
                var panel = btn.up('window').down('panel')
                    , components = panel.query('component');
                
                if (state) {
                    panel.el.mask();
                    //Ext.fly(panel.el.query('.x-mask')[0]).applyStyles({opacity: 0});
                    Ext.fly(panel.el.query('.x-mask')[0]).setOpacity(0);
                } else {
                    panel.el.unmask();
                }
            }
        }]
    }).show();

  4. #3
    Sencha User
    Join Date
    Dec 2010
    Posts
    126
    Answers
    1
    Vote Rating
    0
    varunach is on a distinguished road

      0  

    Default


    That worked beautifully. Brilliant solution.

    Thanks!

Thread Participants: 1

Tags for this Thread