extzs scrollbar отсутствует внутри vbox

Question

У меня есть сетка внутри vbox, которая находится внутри hbox. Панель «Пакеты» прокручивается с помощью колеса мыши, но прокрутка полосы пропускания отсутствует. Панель «Конфигурация» показывает полосу прокрутки, и я не могу понять, в чем разница между этими двумя панелями.

Вот мой ExtJS 4.2 Код:

Ext.application({ 
name: 'Fiddle', 
launch: function() { 
    Ext.create('Ext.container.Viewport', { 
     renderTo: Ext.getBody(), 
     layout: { 
      type: 'hbox', 
      align: 'stretch' 
     }, 
     defaults: { 
      frame: true, 
      autoScroll: true 
     }, 
     items: [{ 
      xtype: 'panel', 
      width: 350, 
      layout: { 
       type: 'vbox', 
       align: 'stretch' 
      }, 
      resizable: true, 
      resizeHandles: 'e', 
      items: [{ 
       title: 'Configurations', 
       height: 290, 
       xtype: 'grid', 
       store: new Ext.data.Store({ 
        model: 'Ext.data.Record', 
        fields: [{ 
         name: 'product', 
         type: 'string' 
        }], 
        data: (function() { 
         var res = [] 
         for (var i = 0; i < 100; i++) { 
          res.push({ 
           product: 'Product ' + i 
          }); 
         } 
         return res; 
        })() 
       }), 
       columns: [{ 
        text: 'Product', 
        dataIndex: 'product', 
        width: 120 
       }] 
      }, { 
       xtype: 'splitter' 
      }, { 
       title: 'Builds', 
       xtype: 'grid', 
       flex: 1, 
       viewConfig: { 
        enableTextSelection: true 
       }, 
       columns: [{ 
        text: 'Number', 
        dataIndex: 'number', 
        width: 120 
       }] 
      }] 
     }, { 
      xtype: 'panel', 
      width: '100%', 
      layout: { 
       type: 'vbox' 
      }, 
      items: [{ 
       title: 'Packages', 
       width: '100%', 
       xtype: 'grid', 
       flex: 2, 
       store: new Ext.data.Store({ 
        model: 'Ext.data.Record', 
        fields: [{ 
         name: 'name', 
         type: 'string' 
        }], 
        data: (function() { 
         var res = [] 
         for (var i = 0; i < 100; i++) { 
          res.push({ 
           name: 'Package ' + i 
          }); 
         } 
         return res; 
        })() 
       }), 
       columns: [{ 
        text: 'Name', 
        dataIndex: 'name', 
        width: 380 
       }] 
      }, { 
       xtype: 'splitter' 
      }, { 
       title: 'Changes', 
       width: '100%', 
       xtype: 'grid', 
       flex: 1, 
       columns: [{ 
        text: 'Author', 
        dataIndex: 'author', 
        width: 159 
       }] 
      }] 
     }] 
    }); 
} 
}); 

Answer 1

Для второго HBOX ребенка панели заменить width: '100%', с flex: 1,. Полоса прокрутки была там, она просто была вне видимой области. Кроме того, вы можете опустить width: '100%', для сеток «Изменения» и «Пакеты», если вы указываете align: 'stretch' в конфигурации макета vbox своей родительской панели, что означает, что дочерние элементы будут растянуты горизонтально, чтобы заполнить ширину родительского контейнера.

https://fiddle.sencha.com/#view/editor&fiddle/1nht