extjs - 如何在 ExtJS TextField 组件的 Label 和 TextField 之间插入另一个组件？

Question

ExtJS 4.2.1 提供的TextField基本上是 aLabel和 aTextField在Containerset to layouthbox中。

我需要ComboBox在. Label_TextFieldContainer

我已经尝试过extend该类TextField，但找不到任何具体显示将组件添加到另一个组件层次结构的适当语法的内容。

有人可以发布一个答案代码片段或链接到一些东西，向对 ExtJS 全新的人解释如何扩展组件并像我尝试的那样修改它吗？

我只需要指出正确的方向，我想我可以跟着它跑。

Answer 1

您正在寻找Ext.form.field.FieldContainer

这是最简单的例子：

Ext.create('Ext.form.Panel', {
    title: 'FieldContainer Example',
    width: 550,
    bodyPadding: 10,

    items: [{
        xtype: 'fieldcontainer',
        fieldLabel: 'Last Three Jobs',
        labelWidth: 100,
        layout: 'hbox',
        items: [{
            xtype: 'combo',
                store: {
                fields: ['abbr', 'name'],
                data : [
                    {"abbr":"AL", "name":"Alabama"},
                    {"abbr":"AK", "name":"Alaska"},
                    {"abbr":"AZ", "name":"Arizona"}
                ]
            },
            queryMode: 'local',
            displayField: 'name',
            valueField: 'abbr',
            flex: 1
        }, {
            xtype: 'splitter'
        }, {
            xtype: 'textfield',
            flex: 1
        }]
    }],
    renderTo: Ext.getBody()
});

您还可以使 fieldContainer 充当单个字段。快速解释：

• 混入Ext.form.field.Field
• 将内部字段设置submitValue为false

Answer 2

根据@sra 提供的答案，这就是我最终得到的。从 Sencha Architect 中提取的代码。

Ext.define('MyApp.view.MyForm', {
    extend: 'Ext.form.Panel',

    height: 250,
    width: 680,
    bodyPadding: 10,
    title: 'My Form',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'fieldcontainer',
                    height: 22,
                    layout: {
                        align: 'stretch',
                        type: 'hbox'
                    },
                    fieldLabel: 'Label',
                    items: [
                        {
                            xtype: 'combobox',
                            fieldLabel: 'Label',
                            hideLabel: true
                        },
                        {
                            xtype: 'textfield',
                            flex: 1,
                            fieldLabel: 'Label',
                            hideLabel: true
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});