PDA

View Full Version : [4.1 B1] Ext.Img first load layout issue



slemmon
12 Jan 2012, 4:06 PM
Ext.Img will load an image and on the first load since the layout doesn't know the size of the image/container it flubs the layout. As soon as the container managing the Ext.Img component does its layout again all is well.

That said, would this be the best way to extend Ext.Img to ensure the first load is always followed by a doLayout of its container?


Ext.define('myimage', {
extend: 'Ext.Img'
, alias: ['widget.myimage']
, initComponent: function () {
this.callParent();
this.addEvents('imageload');
}
, afterRender: function () {
var me = this;
this.callParent();
this.el.on('load', me.onImgLoad, me)
}
, onDestroy: function () {
var me = this;
this.callParent();
this.el.un('load', me.onImgLoad, me)
}
, onImgLoad: function () {
var me = this ,
ct = me.up('container');
me.fireEvent('imageload', me);
if (ct) {
ct.doLayout();
}
}
});

hendricd
13 Jan 2012, 6:21 AM
@slemmon --

I can see where that might be appealing.

Note: A simpler way to destroy that 'load' listener:


Ext.define('myimage', {
extend: 'Ext.Img'
, alias: ['widget.myimage']
, initComponent: function () {
this.callParent();
this.addEvents('imageload');
}
, afterRender: function () {
var me = this;
this.callParent(arguments);
this.mon(this.el, {
'load' : me.onImgLoad,
scope : me
});
}

, onImgLoad: function () {
var me = this ,
ct = me.ownerCt;
me.fireEvent('imageload', me);
if (ct) {
ct.doLayout();
}
}
});

Things to consider:

You would need to ensure that instances of this Class do not receive width, height, or flex configs as these would defeat your goals.
Parent container layout types will greatly influence your results. A flexed box layout with align : stretch would likely scew the image, and any parent with a 'fit' layout would defeat your goal as well, as this would require a fixed h/w on the parent.
This approach might work best in autosized parent containers (free-standing or floating Panel/Window with no layout and no h/w).