javascript - ExtJS，我如何在 Fieldset 中使用 hbox

Question

这是我的小提琴

http://jsfiddle.net/8Pqtx/

我的 hbox 代码在字段集之外工作

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

但是在字段集中它显示一个没有任何内容的文本框

Answer 1

要获取具有 hbox 布局的字段，您不能layout:'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'
                    }
                ]
           }]
        }]

供参考：http: //jsfiddle.net/hWGYE/2929/

Answer 2

您好，我对您的代码进行了一些更改，并且渲染正常。

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