Results 1 to 2 of 2

Thread: Element toggleCls

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

    Default 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
      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 ...

Posting Permissions

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