how to use a component within another component in extjs - extjs

Question

I'm using Extjs for testing purposes and I'm stucked trying to use a component within another. Here is what I have:
This is the main component:
var component = Ext.create('mypackages.mycomponent');
Ext.define('mypackages.maincomp', {
extend: 'Ext.window.Window',
itemId: 'maincomp',
xtype: 'maincomp',
modal: true,
bodyPadding: 10,
height: 350,
width: 270,
closeAction: 'destroy',
resizable: false,
renderTo: Ext.getBody(),
layout: {
type: 'table',
columns: 1
},
items: [
{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name',
labelAlign: 'right',
width: 265,
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Age',
name: 'age',
labelAlign: 'right',
width: 265,
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Phone',
name: 'phone',
labelAlign: 'right',
width: 265,
allowBlank: false
},
{
item: component
}
]
});
and this is the component I would like to render:
Ext.define('mypackages.component', {
extend: 'Ext.Component',
id: 'component',
alias: 'component',
items: [
{
xtype: 'textfield',
fieldLabel: 'Address',
name: 'address',
id: 'address',
labelAlign : 'right',
width: 265,
allowBlank: false
}
],
constructor: function () {
this.callParent();
console.log('I am entering here!!!');
}
});
As you can see I'm tring to load the component like this item: component and it is actually calling the component due to the browser's console shows me the I am entering here!!! message. The problem is the component is not displayed after Phone textfield. What am I missing here? Is it necessary to force the component to be shown? If so, how can I achieve this?

Answer 1

You want to declare your own field type:
Ext.define('mypackages.component', {
extend: 'Ext.container.Container',
xtype: 'myaddressfield',
items: [
{
xtype: 'textfield',
fieldLabel: 'Address',
name: 'address',
id: 'address',
labelAlign : 'right',
width: 265,
allowBlank: false
}
],
constructor: function () {
this.callParent();
console.log('I am entering here!!!');
}
});
Ext.define('mypackages.maincomp', {
extend: 'Ext.window.Window',
itemId: 'maincomp',
xtype: 'maincomp',
modal: true,
bodyPadding: 10,
height: 350,
width: 270,
closeAction: 'destroy',
resizable: false,
renderTo: Ext.getBody(),
layout: {
type: 'table',
columns: 1
},
items: [
{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name',
labelAlign: 'right',
width: 265,
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Age',
name: 'age',
labelAlign: 'right',
width: 265,
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Phone',
name: 'phone',
labelAlign: 'right',
width: 265,
allowBlank: false
},
{
xtype: 'myaddressfield'
}
]
});

Answer 2

In main component :
First: remove the first line. You dont need to create new instance here.
var component = Ext.create('mypackages.mycomponent');
Next change invalid line:
{
item: component
}
To:
{
xtype: 'newComponent'
}
And finally set the alias in second component:
alias: 'widget.newComponent',