PDA

View Full Version : Element toggleCls



Brendan Carroll
1 Dec 2011, 2:34 PM
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



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');
}
});
}
});

Brendan Carroll
1 Dec 2011, 7:30 PM
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.



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
});
}
}
});