Javascript ExtJS，如何在字段集中使用hbox

这是我的小提琴

我的hbox代码在现场集外工作

{
    layout: 'hbox',
    items: [{
        fieldLabel: 'First Name',
        name: 'first',
        allowBlank: false
    }, {
        fieldLabel: 'Last Name',
        name: 'last'
    }]
}

---

但在fieldset内部，它显示一个文本框，没有任何内容。您好，我已经对您的代码做了一些更改，它正在正确渲染

Ext.onReady(function(){
            Ext.create('Ext.form.Panel', {
                title: 'Simple Form with FieldSets',
                labelWidth: 75, // label settings here cascade unless overridden
                url: 'save-form.php',
                frame: true,
                bodyStyle: 'padding:5px 5px 0',
                renderTo: Ext.getBody(),
                layout: 'column', // arrange fieldsets side by side
                items: [{
                    // Fieldset in Column 1 - collapsible via toggle button
                    xtype:'fieldset',
                    columnWidth: 0.5,
                    title: 'Fieldset 1',
                    collapsible: true,
                    defaultType: 'textfield',
                    defaults: {anchor: '100%'},
                    layout: 'anchor',
                    items :[{
                        fieldLabel: 'Field 1',
                        name: 'field1'
                    }, {
                        fieldLabel: 'Field 2',
                        name: 'field2'
                    },

                           {
                                    layout: 'hbox',
                                    xtype:"container",
                                    items: [
                                    {
                                        xtype:"textfield",
                                        fieldLabel: 'First Name',
                                        name: 'first',
                                        allowBlank: false
                                    }, {
                                        xtype:"textfield",
                                        fieldLabel: 'Last Name',
                                        name: 'last'
                                    }
                                            ]
                                }]
                }, ]
            });
  });

---

您好，我已经在您的代码中做了一些更改，它正在正确地呈现

Ext.onReady(function(){
            Ext.create('Ext.form.Panel', {
                title: 'Simple Form with FieldSets',
                labelWidth: 75, // label settings here cascade unless overridden
                url: 'save-form.php',
                frame: true,
                bodyStyle: 'padding:5px 5px 0',
                renderTo: Ext.getBody(),
                layout: 'column', // arrange fieldsets side by side
                items: [{
                    // Fieldset in Column 1 - collapsible via toggle button
                    xtype:'fieldset',
                    columnWidth: 0.5,
                    title: 'Fieldset 1',
                    collapsible: true,
                    defaultType: 'textfield',
                    defaults: {anchor: '100%'},
                    layout: 'anchor',
                    items :[{
                        fieldLabel: 'Field 1',
                        name: 'field1'
                    }, {
                        fieldLabel: 'Field 2',
                        name: 'field2'
                    },

                           {
                                    layout: 'hbox',
                                    xtype:"container",
                                    items: [
                                    {
                                        xtype:"textfield",
                                        fieldLabel: 'First Name',
                                        name: 'first',
                                        allowBlank: false
                                    }, {
                                        xtype:"textfield",
                                        fieldLabel: 'Last Name',
                                        name: 'last'
                                    }
                                            ]
                                }]
                }, ]
            });
  });

---

要获取具有hbox布局的字段，您不能在字段集中应用

布局：'hbox'

。相反，您可以使用

layout:'hbox'

items: [{
            xtype:'fieldset',
            columnWidth: 0.8,
            title: 'Fieldset 1',
            collapsible: true,
            defaultType: 'textfield',
            defaults: {anchor: '100%'},
            layout: 'anchor',
            items :[{
                layout: 'hbox',
                xtype:"container",
                items: [
                    {
                        xtype:"textfield",
                        fieldLabel: 'First Name',
                        name: 'first',
                        allowBlank: false
                    }, {
                        xtype:"textfield",
                        fieldLabel: 'Last Name',
                        name: 'last'
                    }
                ]
           }]
        }]

---

参考：

要获取具有hbox布局的字段，您不能在字段集中应用

布局：'hbox'

。相反，您可以使用

layout:'hbox'

items: [{
            xtype:'fieldset',
            columnWidth: 0.8,
            title: 'Fieldset 1',
            collapsible: true,
            defaultType: 'textfield',
            defaults: {anchor: '100%'},
            layout: 'anchor',
            items :[{
                layout: 'hbox',
                xtype:"container",
                items: [
                    {
                        xtype:"textfield",
                        fieldLabel: 'First Name',
                        name: 'first',
                        allowBlank: false
                    }, {
                        xtype:"textfield",
                        fieldLabel: 'Last Name',
                        name: 'last'
                    }
                ]
           }]
        }]

供参考：