javascript TabPanel 中的 ExtJs Grid 自动适合问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5063282/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ExtJs Grid in TabPanel auto Fit issue
提问by Jinah Adam
I am having problems redering an grid in a a tab panel (Its made with Ext Designer.). the hierarchy is as follows , Viewport. -> tabPanel -> Panel -> Container -> Grid.
我在 aa 选项卡面板（它是用 Ext Designer 制作的）中重新绘制网格时遇到问题。层次结构如下，视口。-> tabPanel -> 面板 -> 容器 -> 网格。
This is how its displayed now
这是它现在的显示方式
Here is the code for viewport
这是视口的代码
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);
}
});
here is the code to create the tab.. (created from a nav panel programmatically)
这是创建选项卡的代码..（以编程方式从导航面板创建）
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);
here is the code for the panel/container/grid
这是面板/容器/网格的代码
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);
}
});
i have tried all sorts of combinations. but just cant get the grid to render correctly any sort of assistance will be appreciated.
我尝试了各种组合。但只是无法让网格正确呈现任何形式的帮助将不胜感激。
采纳答案by Jinah Adam
i seem to have solved the issue.
我似乎已经解决了这个问题。
i removed the layout bit completely from the dynamic tab. i guess now it just picks the layout from the defaults. (still peculiar behavior :S)
我从动态选项卡中完全删除了布局位。我想现在它只是从默认值中选择布局。（仍然是奇怪的行为：S）
回答by Johnathan Hebert
Your currentTab needs a layout of 'fit' also... you gave the phasePanel a layout of 'fit' and the container within the phasePanel a layout of 'fit', but you did not give the currentTab a layout of 'fit'...
您的 currentTab 还需要一个“适合”的布局......您给 phasePanel 一个“适合”的布局，给 phasePanel 中的容器一个“适合”的布局，但您没有给 currentTab 一个“适合”的布局。 ..
The layout refers to how child items will be laid out within a container... and not how an item will fit into its container. So if you want an item to fit to its container, set layout:'fit' on the container, not the item.
布局是指子项在容器中的布局方式……而不是项如何放入其容器中。因此，如果您希望某个项目适合其容器，请在容器而非项目上设置 layout:'fit'。
回答by turbod
You must set in the grid autoHeight: true
您必须在网格中设置 autoHeight: true
xtype: 'grid',
title: 'Current Phases',
autoHeight: true,
store: 'PhaseStore',
autoDestroy: false,
viewConfig: '',
deferRowRender: false,
autoLoad: '',
ref: '../phaseGrid',
id: 'phaseGrid',
And you can set in gridView the autoFill and forceFit attributes.
您可以在 gridView 中设置 autoFill 和 forceFit 属性。
