I have some code that adjusts layout based on the rendered html, thing is that I don't know how to listen for it. I have something along the lines of:
Code:
Ext.define('Project.Utilities', {
scaleFonts: function(container, cssClass, maxHeight, minSize) {
// loop the elements and if it's height > maxHeight then it rescales till either heigt <= maxHeight or minSize is reached
}
});
Then what I'm looking for is something like an after render, to listen for. I have tried painted, but it's called too early, since it doesn't necessarily have a height when added to the dom:
Code:
Ext.define('Project.view.SomeList', {
extend: 'Ext.List',
xtype: 'someList',
store: 'Whatever',
config: {
itemTpl: '<p class="foo">{somePropertyThatMightBeTooLong}</p>',
listeners: {
painted: 'fixFonts'
}
},
fixFonts: function(container, opts) {
Coupons.Utilities.scaleFonts(container, '.foo', 18, '70%')
}
});
Only way I've managed to solve this is by setTimeouts, but I would say that this is a really ugly solution. Is there some kind of afterRender, doneRendering or similar hidden event that I can look for? If not is it possible that it will come?
Tested in 2.0 and 2.1.