如何使中心面板展开以占据extjs边框布局中的全部可用空间？

Question

我有以下jsfiddle ：

Ext.onReady(function(){
  Ext.create('Ext.panel.Panel', {
        renderTo:'myDiv',
        html: '<div style="background-color: blue;"></div>',
        width: 500,
        height: 280,
        border: 'layout',
        items: [
            {
                xtype: 'button',
                text: 'Test Button',
                region: 'north'
            },{
                xtype: 'panel',
                html: '<div style="background-color: red; "></div>',
                region: 'center'
            }
            ]
  });
}); 

如何在不显式设置宽度和高度的情况下使居中的面板扩展到可用的宽度和高度？

Answer 1

如果未显式定义宽度，它将自动采用可用宽度，但必须显式定义高度。 这是设置面板可用高度的替代方法。

Ext.onReady(function(){
  Ext.create('Ext.panel.Panel', {
        renderTo:'myDiv',
        html: '<div style="background-color: blue;"></div>',
        //width: 500,
        height: (document.body || document.documentElement).scrollHeight,
        border: 'layout',
        items: [
            {
                xtype: 'button',
                text: 'Test Button',
                region: 'north'
            },{
                xtype: 'panel',
                html: '<div style="background-color: red; "></div>',
                region: 'center'
            }
            ]
  });
}); 

如果要将高度设置为等于任何元素，则可以使用Ext.get('divid').getHeight()