how to use a component within another component in 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',