Ext JS: невозможно разместить панель сетки в контейнере

Question

Я не могу разместить сетку - панель внутри контейнера. Вот мой пример макета. Пожалуйста, игнорируйте любые открывающие или закрывающие скобки, я хочу дать структуру макета высокого уровня, которую я разработал.

Проблема: здесь, в примере, т.е. в третьем контейнере, я не могу поместить панель и сетку в нее. Когда я удаляю сетку, макет работает нормально, когда я размещаю сетку, тогда весь макет кажется пустым, и я не вижу и других компонентов, также я не получаю никаких ошибок консоли. Я пытался даже дать фиксированную ширину и высоту для контейнеров. Проблема с макетом и отображением компонентов.

Любые предложения высоко ценятся.

extend: 'Ext.form.Panel',
items: [{
            xtype: 'container',
            layout: 'vbox',
            items: [{
               xtype: 'container',
               layout: 'hbox',
               items: [{-----}]
            },{
               xtype: 'container',
               layout: 'hbox',
               items: {
                       xtype: 'panel',
                       title: 'Hours of Operation',
                        itemId: 'hoursOfOperationPanel',
                        items: {
                           xtype: 'grid',
                           store: hoursStore,
                        }
                 },
            },{
               xtype: 'container',
               layout: 'hbox',
               items: [{-----}]               
            }]
      }]

Answer 1

Вместо использования контейнеров с контейнером, вы можете попробовать, как указано ниже, включить элементы в контейнер и определить их макет по умолчанию. Вы можете четко найти элементы на одном уровне и соответствующие им дочерние элементы.

Ext.apply(me, {
        items: [{
            xtype: 'container',
            layout: 'vbox',
            defaults: {
                layout: 'hbox',
                flex: 1,
                width: '100%',
                defaults: {
                    height: '100%'
                }
            },
            items: [{
                items: [{

                }]
            },{
                items: [{

                }]
            }]
        }],
});

Answer 2

Проблема здесь в чрезмерном и / или неправильном использовании макетов. Просто из приведенного выше примера это было бы более уместно:

// classic
extend: 'Ext.form.Panel',
items: [{
  xtype: 'container',
  layout: 'vbox',
  items: [{
    xtype: 'container',
    layout: 'hbox',
    items: [{-----}]
  },{
    xtype: 'grid',
    title: 'Hours of Operation',
    itemId: 'hoursOfOperationPanel',
    store: hoursStore // don't set this to an instance
  },{
    xtype: 'container',
    layout: 'hbox',
    items: [{-----}]
  }]
}]

// modern
extend: 'Ext.form.Panel',
items: [{
  xtype: 'container',
  layout: 'vbox',
  items: [{
    xtype: 'container',
    layout: 'hbox',
    items: [{-----}]
  },{
    xtype: 'panel',
    title: 'Hours of Operation',
    itemId: 'hoursOfOperationPanel',
    layout: 'fit',
    items: [{
      xtype: 'grid',
      store: hoursStore // don't set this to an instance
    }]
  },{
    xtype: 'container',
    layout: 'hbox',
    items: [{-----}]
  }]
}]

Причина, по которой современная версия инструментария должна быть обернута в панель, заключается в названии. Сетка Modern не является панелью, и поэтому не получает заголовок, поэтому вы можете либо вкладывать ее в панель (с подгонкой), либо назначать сетке заголовок.