Javascript Ext.js中的100%高度选项卡面板(使用Sencha Architect)
我正在使用Sencha Architect,还没有弄清楚如何让我的TabPanel内容占据TabPanel所在容器的100% 这是我现在使用的代码:Javascript Ext.js中的100%高度选项卡面板(使用Sencha Architect),javascript,extjs,tabpanel,sencha-architect,Javascript,Extjs,Tabpanel,Sencha Architect,我正在使用Sencha Architect,还没有弄清楚如何让我的TabPanel内容占据TabPanel所在容器的100% 这是我现在使用的代码: Ext.define('MyApp.view.MyViewport', { extend: 'Ext.container.Viewport', layout: { type: 'border' }, initComponent: function() { var me = this
Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'container',
region: 'north',
height: 60
},
{
xtype: 'container',
region: 'center',
items: [
{
xtype: 'tabpanel',
activeTab: 0,
items: [
{
xtype: 'panel',
layout: {
type: 'fit'
},
title: 'Tab 1',
items: [
{
xtype: 'panel',
title: 'My Panel'
}
]
},
{
xtype: 'panel',
title: 'Tab 2'
},
{
xtype: 'panel',
title: 'Tab 3'
}
]
}
]
}
]
});
me.callParent(arguments);
}
});
对于如何实现这一点,我完全不知所措,在Ext.js文档中也找不到答案。过度嵌套。如果您有一个没有布局的容器,那么您经常会出错:
Ext.define('Foo', {
extend: 'Ext.container.Viewport',
layout: 'border',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'container',
region: 'north',
height: 60
}, {
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
items: [{
title: 'Tab 1',
html: 'Tab 1'
}, {
xtype: 'panel',
title: 'Tab 2',
html: 'Tab 2'
}, {
xtype: 'panel',
title: 'Tab 3',
html: 'Tab 3'
}]
}]
});
me.callParent(arguments);
}
});
Ext.onReady(function(){
new Foo();
});