ExtJS, Как я могу использовать горизонтальный бокс внутри Fieldset

Question

Это моя скрипка

http://jsfiddle.net/8Pqtx/

У меня есть код HBOX работающий за пределами Fieldset

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

Но внутри Fieldset он показывает один текстовое поле ни с чем

Answer 1

Чтобы получить поля с макетом HBOX вы не можете применить layout:'hbox' в FIELDSET. Вместо этого вы можете создать контейнер в качестве элемента в FIELDSET с 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' 
            } 
              ] 
           }] 
       }, ] 
      }); 
    });