1. #1
    Ext JS Premium Member Brendan Carroll's Avatar
    Join Date
    May 2007
    Location
    Balmer, MD.
    Posts
    139
    Vote Rating
    1
    Brendan Carroll is on a distinguished road

      0  

    Default Element toggleCls

    Element toggleCls


    I'm not sure if this is a bug but I can't figure it out. I'm trying to toggle between styles on a div in a tpl. It works the first time but on subsequent loads of the details page the toggle class never seems toget applied. Not sure but it may be related to wiring up the event post paint. Paint appears to be called every time the detail page is shown, thus the single and delay due to rendering lag.

    -BC

    Code:
    Ext.define('Sha.view.PoiDetails', {
        extend: 'Ext.Component',
        requires: 'Sha.model.PoiDetail',
        xtype: 'poidetails',
        headerTitle: 'Details',
        config: {
            tpl: '<tpl for="."><div class="maplegend"><div class="dtlitm">{name}<p>{address}<p>{desc}<p>{phone}<p><a href={url} target="_new">Link</a><div id="dltFav" class="sc-favicon"></div></div></div></tpl>'
        },
    
        initialize: function () {
            this.on({
                painted: this.onPainted,
                delay: 300,
                single: true
            });
            this.callParent();
        },
    
        onPainted: function (e, f) {
            //var b = Ext.DomQuery.selectNode('div[class="sc-favicon"]'); 
            var b = Ext.get('dltFav');
            //console.log(b);
            b.on({
                tap: function (a) {
                    Ext.get(a.getTarget()).toggleCls('set');
                }
            });
        }
    });
    -BC ...

  2. #2
    Ext JS Premium Member Brendan Carroll's Avatar
    Join Date
    May 2007
    Location
    Balmer, MD.
    Posts
    139
    Vote Rating
    1
    Brendan Carroll is on a distinguished road

      0  

    Default


    Fixed it by destroying component. Doesn't seem as though erase and paint should be called as often as they are, however, at least in PR2 that is.

    Code:
    Ext.define('Sha.view.PoiDetails', {
        extend: 'Ext.Component',
        requires: 'Sha.model.PoiDetail',
        alias: 'widget.poidetails',
        xtype: 'poidetails',
        headerTitle: 'Details',
        config: {
            tpl: '<tpl for="."><div class="maplegend"><div class="dtlitm">{name}<p>{address}<p>{desc}<p>{phone}<p><a href={url} target="_new">Link</a><div id="dltFav" class="sc-favicon"></div></div></div></tpl>'
        },
    
        initialize: function () {
            this.on({
                painted: this.onPainted,
                delay: 500
            });
    
            this.on({
                erased: this.onErased
            });
    
            this.callParent();
        },
    
        onErased: function (e, f) {
            var b = Ext.get('dltFav');
            if (!Ext.isEmpty(b)) {
                b.destroy();
            }
            console.log('erased');
        },
    
        onPainted: function (e, f) {
            //var b = Ext.DomQuery.selectNode('div[class="sc-favicon"]'); 
            var b = Ext.get('dltFav');        
            console.log('painted');
            if (!Ext.isEmpty(b)) {
                var d = this.getData();
                b.on({
                    tap: function (a) {
                        Ext.get(a.getTarget()).toggleCls('set');
                        this.fireEvent('favtap', d, Ext.get(a.getTarget()).hasCls('set'));
                        console.log('tapped');
                    },
                    scope: this
                });
            }
        }
    });
    -BC ...