как использовать компонент внутри другого компонента в extjs

Question

Я использую Extjs для тестирования, и я застрял, пытаясь использовать один компонент внутри другого.Вот что у меня есть:

Это основной компонент:

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
        }
    ]
});

, и это компонент, который я хотел бы визуализировать:

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!!!');
    }
});

Как вы можетевидите, я пытаюсь загрузить компонент как этот item: component, и он фактически вызывает компонент, потому что консоль браузера показывает мне сообщение I am entering here!!!.Проблема в том, что компонент не отображается после текстового поля телефона.Что мне здесь не хватает?Нужно ли принудительно показывать компонент?Если да, то как мне этого добиться?

Answer 1

Вы хотите объявить свой собственный тип поля:

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

В основном компоненте:

Первый: убрать первую строку. Вам не нужно создавать новый экземпляр здесь.

var component = Ext.create('mypackages.mycomponent');

Следующее изменение неверной строки:

    {
        item: component
    }

Кому:

    {
        xtype: 'newComponent'
    }

И, наконец, установите псевдоним во втором компоненте:

alias: 'widget.newComponent',