PDA

View Full Version : A way to abort a component being created?



Jangla
24 Jun 2014, 7:10 AM
The scenario:

You have a DOM element that is only sometimes rendered into the page.
You have an ExtJS component that renders to that DOM element.

You could wrap it like this:



if ( Ext.get('myDomElement') ) {
Ext.create('myComponent', {
renderTo : 'myDomElement'
});
}


...but this gets ugly and unwieldy if you have lot of the same situation popping up all over the place.

So, is it possible for a component to "self manage" this process by checking for the existence of its intended render target and aborting if it's not in the DOM?

I've tried this:






Ext.define('My.view.MyComponent', {
extend : 'My.view.BaseView',
alias : 'widget.myviewcomponent',


initComponent: function(){


var me = this;
me.on('beforerender', me.checkRenderTargetExists);


this.callParent( arguments );
},


// this will return false if the DOM element doesn't exist
checkRenderTargetExists : function() {
var me = this;
return ( me.renderTo && !Ext.get(me.renderTo ) ) ? false : true;
}
});





But this generates this error: http://puu.sh/9I6Cy/c252436f0f.png

So, any ideas? Is this possible or should I just stick to the ugly method?

evant
24 Jun 2014, 10:06 PM
I think the first method you suggested is adequate (perhaps wrap it up in a function).

There's nothing built in to do this because it's not a very "Ext" way of doing things.

burnnat
25 Jun 2014, 5:42 AM
You could also try overriding the render() method. Something like this should work, I think (though I haven't tested this):


Ext.define('My.view.MyComponent', {
extend: 'My.view.BaseView',

render: function(container) {
container = this.initContainer(container);

if (container) {
this.callParent(arguments);
}
}
});