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
    4,904
    Answers
    369
    Vote Rating
    177
    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

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