Question

ExtJS 4.2.1提供的TextField基本上是Label，而TextField内的Container设置为布局hbox。

我需要在ComboBox内的Label和TextField之间插入Container。

我已尝试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);
    }

});

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

2 个答案: