Ext JS: Почему GridPanel в ViewPort не имеет полос прокрутки?

Question

В простом примере панели в ViewPort на панели не будет полосы прокрутки для переполнения текста, поскольку по умолчанию для autoScroll есть false для панели.

Вот рабочий пример: http://jsfiddle.net/rqZ4y/ (Спасибо CD ..)

Вот немного более сложный пример, показывая GridPanel (который autoScroll по умолчанию это true, так что не нужно устанавливать явно !)

Ext.application({ 
    launch: function() { 
     Ext.create("Ext.Viewport", { 
//   layout: "fit", 
      items: [ 
       { 
        html: "Hello!" 
       }, 
       { 
        xtype: "grid", 
        title: 'Simpsons Contacts', 
        store: Ext.data.StoreManager.lookup('simpsonsStore'), 
        columns: [ 
         { text: 'Name', dataIndex: 'name' }, 
         { text: 'Email', dataIndex: 'email', flex: 1 }, 
         { text: 'Phone', dataIndex: 'phone' } 
        ] 
       } 
      ] 
     }); 
    } 
}); 

Рабочий пример:http://jsfiddle.net/gXsPk/

В этом случае сетка не имеет полос прокрутки.

Я отключил layout: "fit", чтобы получить обе панели для показа. Если я укажу layout: "fit", тогда это вызывает «Привет!». чтобы заняться всем доступным пространством, и сетка вообще не видна.

Если я удалю «Привет!» панели и снова ввести опцию layout: "fit", тогда я получаю сетку с полосами прокрутки!

Рабочий пример:http://jsfiddle.net/VBAyS/

Что я делаю неправильно здесь ?!

Я использую Ext JS 4.1.1a

Answer 1

по умолчанию для autoScroll является false.

Установить autoScroll: true на использование элемента компоновки компонентов и показать полосы прокрутки автоматически, когда это необходимо.

Рабочий пример: http://jsfiddle.net/rqZ4y/

EDIT:

Использование vbox макет должен решить проблему.

Я изменил расположение на:

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

Далее я добавил flex: 1 к сетке.

Рабочий пример: http://jsfiddle.net/gXsPk/1/