Question

这是我的小提琴

我的hbox代码在fieldset之外工作

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

但是在fieldset中它显示了一个没有任何内容的文本框

Answer 1

要获取具有hbox布局的字段，您无法在fieldset中应用layout:'hbox'。相反，您可以使用layout:'hbox'

在fieldset中创建一个容器作为项目

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

ExtJS，我如何在Fieldset中使用hbox

2 个答案: