Sencha Touch 2 FormPanel не отображается должным образом (проблема с макетом?)

Question

У меня проблемы с макетом FormPanel в Sencha Touch 2. См. Пример приложения ниже.

Должна быть панель с макетом vbox, содержащая 3 элемента: фрагмент текста,FormPanel и еще один фрагмент текста.Однако FormPanel, кажется, имеет размер 0x0 и не отображается вообще, поэтому я вижу только два текста.

Я обнаружил 2 вещи, которые отображают панель формы:

1. Настройка layout: 'fit' на внешней панели.Но тогда все перекрывается.fit на самом деле не предназначен для более чем одного элемента, так что это не решение.

2. Настройки явно width и height config на FormPanel.Но я хочу, чтобы макет сам и не нужно указывать это в пикселяхЗачем мне это делать?

Я пробовал кучу других случайных параметров, но я просто стреляю в темноте.Так чего мне не хватает?

Ext.application({
  name: 'TestApp',
  launch: function() {
    return Ext.Viewport.add({
      xtype: 'panel',
      layout: {
        type: 'vbox',
        align: 'center'
      },
      // layout: 'fit'  // This shows the form, but overlaps all 3 panel items.
      items: [
        { html: 'Fill in the form below' },
        {
          xtype: 'formpanel',
          // width: 300,  // These fixed sizes reveal the form, but why?
          // height: 300, // These fixed sizes reveal the form, but why?
          items: [
            {
              xtype: 'fieldset',
              items: [
                {
                  xtype: 'textfield',
                  name: 'username',
                  label: 'Username'
                }
              ]
            }
          ]
        },
        { html: 'Fill in the form above' }
      ]
    });
  }
});

Answer 1

Установите scrollable свойство вашего объекта formpanel на false, что решит проблему.

{
  xtype: 'formpanel',
  scrollable: false,
  items: [
    {
      xtype: 'fieldset',
      items: [
        {
          xtype: 'textfield',
          name: 'username',
          label: 'Username'
        }
      ]
    }
  ]
},

Обновление. Обратите внимание, что в более новых версиях Sencha (2.3) вам придется использовать scrollable: null, как заметил Натан До в его комментарии к этому ответу. Но поскольку это не документированное свойство, оно может быть изменено в будущем.

Answer 2

Ответ TracKer верен, но он не дает объяснения, почему.

Вот мое мнение о том, почему вам нужна прокрутка: false. Если формпанель прокручивается, то вам нужно сказать Сенче, какбольшой, чтобы сделать это (и в пределах этого размера пользователь может прокручивать его).Однако, если он НЕ прокручивается, он займет все пространство, которое ему разрешено, и чтобы стать больше, пользователь может прокрутить его, чтобы получить к нему доступ.

Немного запутанно = \

Answer 3

Я немного изменил ваш код, но вот что я придумал:

Ext.application({
name : 'TestApp',
requires: ['Ext.form.Panel', 'Ext.form.FieldSet'],
launch : function() {
    var paneltest = Ext.create('Ext.Panel', {
        fullscreen: true,
        layout: 'vbox',
        // layout: 'fit'  // This shows the form, but overlaps all 3 panel items.
        items : [
            {
                html : 'Fill in the form below',
                flex: 1
            },
            {
                xtype: 'formpanel',
                flex: 1,
                items : [
                    {
                        xtype : 'fieldset',
                        items : [{
                            xtype : 'textfield',
                            name : 'username',
                            label : 'Username'
                        }]
                    }
                ]
            }, 
            {
                html : 'Fill in the form above',
                flex: 1
            }
        ]
    });

    Ext.Viewport.add(paneltest);
}
});

Моё основное изменение в вашем коде состояло в том, что я удалил

layout: {
    type: 'vbox',
    align: 'center'
  }

иЯ изменил его на

layout: 'vbox'

Я также добавил flex к вашим элементам.Это правильный способ использовать макеты vbox и hbox.Я не совсем уверен, почему это работает, однако похоже, что 'center' - недопустимое значение, которое вы можете присвоить атрибуту align.Я думаю, что вы ищете «середину».И если это не дает того, что вы хотите, возможно, попробуйте добавить класс или идентификатор на вашу панель и управлять выравниванием с помощью css.Надеюсь, это поможет.