ExtJs Field Container Stretch

时间:2016-02-19 11:37:51

标签: extjs layout extjs6-classic

我正在使用ExtJs 6。 如何实现FieldContainer的布局,与表单布局完全相同。

看我的小提琴:https://fiddle.sencha.com/#fiddle/15v5

我希望textfieldFieldContainer的大小与第一个textfield的大小完全相同。

请注意,我不是textfield放在我的FieldContainer中,但我想对componentFieldContainer的每种类型sendMessageData都有同样的想法。

提前致谢!

1 个答案:

答案 0 :(得分:1)

更改表单面板的布局

Ext.application({
    name : 'Fiddle',

    launch : function() {
       Ext.create({
            xtype: 'panel',
            renderTo: Ext.getBody(),
            items: {
                padding: 5,
                xtype: 'form',
                layout: {
                            type:'vbox', 
                            align:'stretch'
                        },
                items: [
                    {
                        xtype: 'textfield',
                        fieldLabel: 'Name'
                    }, {
                        xtype: 'fieldcontainer',
                        fieldLabel: 'Test',
                        layout: 'form',
                        //layout: {
                        //    type:'vbox', 
                        //    align:'stretch'
                        //},
                        // combineLabels: true,
                        items: [
                            {
                                itemId: "in",
                                xtype: 'textfield'
                            }, {
                                itemId: "in2",
                                xtype: 'textfield'
                            }
                        ]
                    }, {
                        xtype: 'fieldcontainer',
                        fieldLabel: 'Test2',
                        layout: 'form',
                        //layout: {
                        //    type:'vbox', 
                        //    align:'stretch'
                        //},
                        // combineLabels: true,
                        items: [
                            {
                                xtype: 'component',
                                style: {
                                    border: '1px solid red'
                                },
                                html: 'something'
                            }
                        ]
                    }
                ]
            }
        })
    }
});