我在选项卡面板(使用Ext Designer制作)中重新排列网格时遇到问题。层次结构如下, 视口。 - > tabPanel - >面板 - >容器 - >格。
这是它现在显示的方式
以下是视口的代码
mainWindowUi = Ext.extend(Ext.Viewport, {
layout: 'border',
id: 'mainWindow',
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'Navigation',
region: 'west',
width: 200,
frame: true,
split: true,
titleCollapse: true,
collapsible: true,
id: 'navigation',
items: [
{
flex: 1,
xtype: 'mytreepanel'
}
]
},
{
xtype: 'tabpanel',
layoutOnTabChange: true,
resizeTabs: true,
defaults: {
layout: 'fit',
autoScroll: true
},
region: 'center',
tpl: '',
id: 'mainTabPanel',
layoutConfig: {
deferredRender: true
}
}
];
mainWindowUi.superclass.initComponent.call(this);
}
});
这是创建标签的代码..(以编程方式从导航面板创建)
var currentTab = tabPanel.findById(node.id);
// If not yet created, create the tab
if (!currentTab){
currentTab = tabPanel.add({
title:node.id,
id:node.id,
closable:true,
items:[{
xtype: 'phasePanel',
layout: 'fit',
autoscroll: true,
}],
autoScroll:true,
});
}
// Activate tab
tabPanel.setActiveTab(currentTab);
这是面板/容器/网格的代码
PhasePanelUi = Ext.extend(Ext.Panel, {
frame: true,
layout: 'anchor',
autoScroll: true,
autoWidth: true,
defaults: '',
initComponent: function() {
this.items = [
{
xtype: 'container',
autoScroll: true,
layout: 'fit',
defaults: {
layout: 'fit',
autoScroll: true
},
id: 'gridHolder',
items: [
{
xtype: 'grid',
title: 'Current Phases',
store: 'PhaseStore',
autoDestroy: false,
viewConfig: '',
deferRowRender: false,
autoLoad: '',
ref: '../phaseGrid',
id: 'phaseGrid',
columns: [
{
xtype: 'gridcolumn',
header: 'Name',
dataIndex: 'name',
sortable: true,
width: 200
},
{
xtype: 'gridcolumn',
header: 'Estate',
dataIndex: 'estate_name',
sortable: true,
width: 500
}
]
}
]
}
];
PhasePanelUi.superclass.initComponent.call(this);
}
});
我尝试了各种组合。但是不能让网格正确呈现任何形式的帮助将不胜感激。
答案 0 :(得分:3)
你的currentTab也需要'fit'的布局......你给了phasePanel一个'fit'的布局和phasePanel中的容器布局'fit',但你没有给currentTab一个布局'适合” ...
布局指的是如何在容器中布置子项目......而不是项目如何适合其容器。因此,如果您想要一个项目适合其容器,请在容器上设置layout:'fit',而不是项目。
答案 1 :(得分:1)
您必须在网格中设置autoHeight: true
xtype: 'grid',
title: 'Current Phases',
autoHeight: true,
store: 'PhaseStore',
autoDestroy: false,
viewConfig: '',
deferRowRender: false,
autoLoad: '',
ref: '../phaseGrid',
id: 'phaseGrid',
您可以在gridView中设置autoFill和forceFit属性。
答案 2 :(得分:0)
我从动态标签中完全删除了布局位。我猜现在它只是从默认值中选择布局。 (仍然是特殊的行为:S)