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,392
    Answers
    434
    Vote Rating
    201
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      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