Макет ExtJs: Как расположить элементы в каждой строке?

Question

Я начинающий extjs.
Я хочу расположить некоторые TextFields, как показано ниже:

a:______ b:______ c:______
д:______ е:______ ф:______

вот мои тестовые коды ниже:

Ext.onReady(function()
{
    new Ext.panel.Panel(
    {
        renderTo: Ext.getBody(),
        layout:'vbox',
        width: 670,
        tbar: [{text:"Add"}],
        defaults:
        {
            layout:"column",
            height:50
        },
        items:
        [
            {
                defaults:
                {
                    labelAlign:"right",
                    labelWidth:50
                },
                items:
                [
                    {
                        xtype: 'textfield',
                        fieldLabel: 'a'
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'b'
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'c'
                    }
                ]
            },
            {
                defaults:
                {
                    labelAlign:"right",
                    labelWidth:50
                },
                items:
                [
                    {
                        xtype: 'textfield',
                        fieldLabel: 'd'
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'e'
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'f'
                    }
                ]
            }
        ]
    });
});

в результате на странице не может отображаться никаких текстовых полей.
Спасибо за любую помощь заранее!

Answer 1

Вы можете сделать что-то вроде:

new Ext.panel.Panel({
  renderTo: Ext.getBody(),
  width: 670,
  tbar: [{
    text: "Add"
  }],
  defaults: {
    layout: ,
    height: 50
  },
  items: [{
    defaults: {
      labelAlign: "right",
      labelWidth: 50
    },
    items: [{
      xtype: 'textfield',
      fieldLabel: 'a'
    }, {
      xtype: 'textfield',
      fieldLabel: 'b'
    }, {
      xtype: 'textfield',
      fieldLabel: 'c'
    }]
  }, {
    defaults: {
      labelAlign: "right",
      labelWidth: 50
    },
    items: [{
      xtype: 'textfield',
      fieldLabel: 'd'
    }, {
      xtype: 'textfield',
      fieldLabel: 'e'
    }, {
      xtype: 'textfield',
      fieldLabel: 'f'
    }]
  }]
});

По сути, это тот же пример, за исключением замены vbox макет по умолчанию auto раскладка. Причина, по которой ваш пример не сработал, заключается в том, что vbox макеты нуждаются в высоте и ширине, установленных на нем как-то.

Вы также можете сделать что-то вроде:

new Ext.panel.Panel({
  renderTo: Ext.getBody(),
  layout: 'column',
  width: 670,
  tbar: [{
    text: "Add"
  }],
  defaults: {
    labelAlign: "right",
    labelWidth: 50
  },
  items: [{
    xtype: 'textfield',
    fieldLabel: 'a'
  }, {
    xtype: 'textfield',
    fieldLabel: 'b'
  }, {
    xtype: 'textfield',
    fieldLabel: 'c'
  }, {
    xtype: 'textfield',
    fieldLabel: 'd'
  }, {
    xtype: 'textfield',
    fieldLabel: 'e'
  }, {
    xtype: 'textfield',
    fieldLabel: 'f'
  }]
});

Это column макет без вложенных элементов, как и раньше. Одна хорошая вещь о column Макет состоит в том, что он сместит столько элементов, сколько он может, влево, и если элемент не помещается, он перейдет в следующий ряд. Поскольку ширина является статической 670, она может вмещать только 3 текстовых поля в строке. Расположение столбцов не требует установки высоты.