extjs滚动条在vbox内部丢失

我有内部hbox的vbox内的网格。面板'包'可以用鼠标滚轮滚动，但滚动条丢失。面板'配置'显示滚动条，我无法弄清楚这两个面板之间的区别。extjs滚动条在vbox内部丢失

这里是我的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 
       }] 
      }] 
     }] 
    }); 
} 
});

来源

2017-01-03 Martin Barnas

对于第二横向盒子面板与flex: 1,取代width: '100%',。滚动条在那里，它只是在可见区域之外。此外，如果您在其父级面板的vbox布局配置中指定align: 'stretch'，则可以省略width: '100%',作为“更改”和“包”网格，这意味着子项目将被水平拉伸以填充父容器的宽度。

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

来源

2017-01-03 16:06:02 scebotari66

从第二个hbox子面板中删除宽度有所帮助。谢谢。但是当我从网格中删除宽度时，它们消失了。 –

对不起。我编辑了我的答案。 – scebotari66

extjs滚动条在vbox内部丢失

回答

相关问题