extjsスクロールバーがvbox内にありません

Question

グリッド内にvboxがあり、hbox内にあります。パネル 'Packages'はマウスホイールでスクロール可能ですが、スクロールバーはありません。 パネル 'Configuration'にはスクロールバーが表示されていますが、この2つのパネルの違いは何ですか？第二のhboxの子パネルについては

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

flex: 1,でwidth: '100%',を置き換える：

は、ここに私のExtJS 4.2のコードがあります。スクロールバーはそこにあり、それは可視領域の外にありました。また、親パネルのvboxレイアウト構成にalign: 'stretch'を指定した場合は、 "Changes"と "Packages"グリッドのためにwidth: '100%',を省略することができます。つまり、子アイテムは親コンテナの幅を埋めるように水平に引き伸ばされます。

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