View Full Version : Create component on init

19 May 2016, 10:01 PM
On initComponent there is gridpanel created:

My.Common.AddressWindow = Ext.extend(Ext.Window, {
initComponent: function () {

this.addressGridPanel = new My.Common.AddressesGrid({...})

Why there is this.add() at the last line? Doesn't "this.addressGridPanel" already add this component to AddressWindow?

And second, if i place "My.Common.AddressWindow.superclass.initComponent.call(this);" as the last line,
then this code doesn't work (but no error). Is it important the position of superclass call?

23 May 2016, 8:26 AM
If you are wanting to add the AddressesGrid as a child of AddressWindow, then the need for .add(...) is essential. this.addressesGrid only stores the reference to your AddressWindow instance on the component, but it doesn't add it as a child to the component.

23 May 2016, 11:18 PM
Thank you.
Can you also tell me what is the main difference bewteeen this and add?
It would work also with "this.addressGridPanel":

this.addressGridPanel=new My.Common.AddressesGrid({...});

But could be also:

this.add(new My.Common.AddressesGrid({...}));

Does it has and meaning to assign to this and add:

this.addressGridPanel=new My.Common.AddressesGrid({...});

And second, I have noticed that call to superclass is in some places at the beginning of init method, while on some other places is somewhere in the middle, while sometimes is at the end of init method.
What is the point of when to call cuperclass? If I change the position of this call, the code doesn't work any more as it should(but there is no error), so, it is important.
(it is not my project and I try to figure it out how it works).

initComponent: function () {
My.Common.AddressWindow.superclass.initComponent.call(this);//for this example is here

this.addressGridPanel = new My.Common.AddressesGrid({...})
//My.Common.AddressWindow.superclass.initComponent.call(this); could be here

//My.Common.AddressWindow.superclass.initComponent.call(this); could be here

25 May 2016, 6:06 AM
In your first example, I am not sure of the need for assigning reference to the class instance. You are correct, you can create the new instance as an argument to the add method and it works just fine. The only reason is may have been assigned to this.addressGridPanel is so that there was easy reference to it in other instance methods.

For the order of calling the superclass constructor, it just depends on what all is being processed. The reason it is at the top in this case is because before you can add your AddressGridPanel to the component, it needs to be initialized as a component. Then you can call add on it. If you attempt to add prior to calling the super class, the instance has not been created yet so there's really nothing to add it to.

25 May 2016, 6:20 AM
I have seen that some similar things are done in constructor instead of initComponent:
Here this call is always as the last line inside init method:

constructor: function (cfg) {
if (cfg) { Ext.apply(this, cfg); }
this.addressGridPanel=new My.Common.AddressesGrid({...});
My.Common.AddressWindow.superclass.constructor.apply(this, arguments);

Here the superclass call can be(or must be) in the last line, why?
Can you explain a little bit the difference - when use init and when constructor?

Thank you

26 May 2016, 4:23 AM
I have tried different combinations inside constructor.
By using "this.add(new ..)", there are 3 items created on main component,
while it is not the case with "this.addressGridPanel".

I can't find any benefit why would I use "add" since everything works also with this and add
seems to have more overhead.

26 May 2016, 6:57 PM
I would have to see the full component in order to better judge. However, using this.addressGridPanel would do absolutely nothing unless later on in the code it was passed to an add() method.

26 May 2016, 11:14 PM
Hi Tristan,

it is true what you have already answered:
"this.addressesGrid only stores the reference to your AddressWindow instance on the component"

And i can access this grid everywhere from my window, inside every method, by addressing it with this and name,
for example:

What I don't understand is what is the point of using add method?
It seems to me there is more overhead by using add and I can't find any benefit of doing that.

In my code there is "this" everywhere, while on some places it is also "add" beside "this".
But i can't figure it out why? I guess different programmer.

It is generally speaking, so, I guess you don't need the code.
Is there any case when referencing with "this" won't do the job and "add" must be used?

27 May 2016, 5:31 AM
add() is used to add a component as a child of another component. Seeing an instance of AddressesGrid to this does nothing more than set that variable to the instance of a class rather than to the local scope (such as using var addressGrid). If you just had this.addressGridPanel = new My.Common.AddressesGrid({...}) without a call to add(), nothing would happen to that component unless something later in the code was adding it to another component, or there was logic inside the AddressesGrid class to render it some place.

I can't know for sure what's happening without seeing the bigger picture.

27 May 2016, 6:25 AM
Ok, so the difference is if you use add, the components is rendered inside parent, by using this,
the component must be rendered explicitly.

My.Common.AddressWindow = Ext.extend(Ext.Window, {
constructor: function (config) {
if (config == null) config = {};

Ext.applyIf(config, {
height: 400,
width: 800,
layout: 'fit',
resizable: false,
addresses: [],
hideDeleteButton: true,
hideAddNewButton: false

Ext.apply(this, config);


SM.Common.AddressWindow.superclass.constructor.call(this, arguments);
initComponent: function () {
this.addressGridPanel = new SM.Common.AddressesGrid({
hideDeleteButton: this.hideDeleteButton,
hideAddNewButton: this.hideAddNewButton,
isAddresChanged: false,
selModel: new Ext.grid.CheckboxSelectionModel({
checkOnly: true,
singleSelect: true,
header: "",
listeners: {
scope: this,
rowselect: function () {
this.onAddrSelect.defer(1, this);
store: this.addressStore,
editTrigger: "button"

this.formPanel = new Ext.form.FormPanel({
layout: 'column',
height: 95,
labelWidth: 150,
labelAlign: 'right',
padding: '10px',
border: false,
defaults: { border: false },
items: [
columnWidth: 0.4,
layout: 'form',
items: [
this.addressGridPanel ,
this.....//and some other components
],....//and so on

Here you define inside items the position and render, where some component would take place.

If i would use "add", the components are added as child and you don't have to define
them inside items property.
Components are added to parent and are rendered at the same order, one after other.
But how would you define then the layout of components when you use "add" method?
Do you have some example?

Otherwise, it seems to me, that everything can be done without "add" method?

Thanks for clarification.