PDA

View Full Version : How to add childEl dynamically after render?



adrianmirjan
25 Oct 2012, 8:37 AM
I have a custom component and I would like to add its child to childEls after render happens in Ext 4.1.2.
imageEl just does not want to be added as a child element. However dropAreaEl and textEl from parent class works fine.

Ext.define('Ext.ux.component.ImageFileDropAreaField', {
extend: 'Ext.ux.component.FileDropAreaField',
alias: 'widget.imagefiledropareafield',

requires: ['Ext.Img'],

initComponent: function() {
this.callParent(arguments);

this._imageComponent = Ext.create('Ext.Img', {
id: this.getId() + '-imageEl',
itemId: this.getId() + '-imageEl', // Does not make difference
name: this.getId() + '-imageEl', // having those.
src: Ext.BLANK_IMAGE_URL
});
},

onRender: function() {
this.callParent(arguments);

this._imageComponent.render(this.dropAreaEl);
//TODO: Cannot get this working. Need to figure out how to add imageEl after render.
//I have tried various variants.
//this.addChildEls('imageEl');
//this.addChildEls(this._imageComponent.getEl());
//this.addChildEls(this._imageComponent);
//this.addChildEls(Ext.get(this._imageComponent.getId()));
console.debug('Works:', this.dropAreaEl, this.textEl);
}
});

skirtle
25 Oct 2012, 8:59 AM
What about this?


this.imageEl = this._imageComponent.getEl();

adrianmirjan
26 Oct 2012, 2:27 AM
Well.. This is a workaround. The imageEl will not be registered as a child this way. So you won't be able remove it or do something else with it.

I'm wondering why addChildEls does not work? Am I doing something wrong or could it be a bug?

skirtle
26 Oct 2012, 11:49 AM
Well.. This is a workaround. The imageEl will not be registered as a child this way. So you won't be able remove it or do something else with it.

childEls are just a quick way to add elements to the component. I don't think they do whatever else it is you're expecting.

The only thing you'll be missing is the automatic element destruction when the component is destroyed but you should get that anyway by destroying the Img component.


I'm wondering why addChildEls does not work? Am I doing something wrong or could it be a bug?

I don't think it's a bug, at worst it's a documentation problem. childEls are only supposed to be applied during rendering. Just take a quick look at the code for addChildEls, all it does it add an entry to an array. That array is processed immediately after the component is added to the DOM and it won't attempt to add them subsequently.