Javascript 有没有办法让 ExtJS GridPanel 自动调整其宽度，但仍包含在一些非 ExtJS 生成的 HTML 中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2366211/
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
Is there any way to get an ExtJS GridPanel to automatically resize its width, but still be contained inside some non-ExtJS-generated HTML?
提问by Micah
I want to include an ExtJS GridPanelinside a larger layout, which in turn must be rendered inside a particular div in some pre-existing HTML that I don't control.
我想GridPanel在更大的布局中包含一个 ExtJS ，而该布局又必须在某些我无法控制的预先存在的 HTML 中的特定 div 内呈现。
From my experiments, it appears that the GridPanelonly resizes itself correctly if it's within a Viewport. For instance, with this code the GridPanelautomatically resizes:
从我的实验来看，GridPanel如果它在Viewport. 例如，使用此代码GridPanel自动调整大小：
new Ext.Viewport(
{
layout: 'anchor',
items: [
{
xtype: 'panel',
title: 'foo',
layout: 'fit', items: [
{
xtype: 'grid',
// define the grid here...
but if I replace the first three lines with the lines below, it doesn't:
但是如果我用下面的行替换前三行，它不会：
new Ext.Panel(
{
layout: 'anchor',
renderTo: 'RenderUntoThisDiv',
The trouble is, Viewportalways renders directly to the body of the HTML document, and I need to render within a particular div.
问题是，Viewport总是直接渲染到 HTML 文档的正文，我需要在特定的 div 内渲染。
If there is a way to get the GridPanelto resize itself correctly, despite not being contained in a ViewPort, that would be ideal. If not, if I could get the Viewportto render the elements within the div, I'd be fine with that. All of my ExtJS objects can be contained within the same div.
如果有一种方法可以使GridPanel正确调整自身大小，尽管没有包含在 a 中ViewPort，那将是理想的。如果没有，如果我可以Viewport在 div 中渲染元素，我会很好。我所有的 ExtJS 对象都可以包含在同一个 div 中。
Does anybody know of a way to get a GridPanel to resize itself correctly, but still be contained inside some non-ExtJS-generated HTML?
有没有人知道如何让 GridPanel 正确调整自身大小，但仍包含在一些非 ExtJS 生成的 HTML 中？
回答by Jonathan Julian
To resize Ext JS components when they are not in a Viewport, you need to pass along browser window resize events.
要在 Ext JS 组件不在 a 中时调整它们的大小Viewport，您需要传递浏览器窗口调整大小事件。
Ext.EventManager.onWindowResize(panel.doLayout, panel);
In your example, store the Panelinto var panel, and then set up the event handler after the var declaration but still inside of Ext.onReady.
在您的示例中，存储Panelinto var panel，然后在 var 声明之后设置事件处理程序，但仍在Ext.onReady.
Here is a full single page solution:
这是一个完整的单页解决方案：
<html>
<head>
<link rel="stylesheet" href="ext-3.1.1/resources/css/ext-all.css" />
<script src="ext-3.1.1/adapter/ext/ext-base.js"></script>
<script src="ext-3.1.1/ext-all-debug.js"></script>
<script>
Ext.BLANK_IMAGE_URL = 'ext-3.1.1/resources/images/default/s.gif';
Ext.onReady(function(){
var panel = new Ext.Panel({
renderTo: 'areaDiv',
layout: 'fit',
items: [{
height: 200,
title: 'foo',
xtype: 'grid',
cm: new Ext.grid.ColumnModel([
{header: "id", width: 400},
{header: "name", width: 400}
]),
store: new Ext.data.ArrayStore({
fields: ['id','name'],
data: [[1,'Alice'],[2,'Bill'],[3,'Carly']]
})
}]
});
//pass along browser window resize events to the panel
Ext.EventManager.onWindowResize(panel.doLayout, panel);
});
</script>
</head>
<body>
header
<div id="areaDiv" style="padding:30px;"></div>
footer
</body>
</html>
Note that I've removed the redundant panel (a GridPanelisa Panel, so no need to wrap it), and used layout fitinstead of anchor. Layout fitis actually the key to a fluid layout. Make the browser smaller, then bigger. You'll see the grid always fills the entire width, with the exception of the padding.
请注意，我已经删除了多余的面板（aGridPanel是a Panel，因此无需包装它），并使用 layoutfit而不是anchor. 布局fit实际上是流畅布局的关键。使浏览器变小，然后变大。您会看到网格始终填充整个宽度，填充除外。
回答by Jeff Evans
I don't have enough reputation to "comment anywhere" yet, but I do have a fix to the "not working when window is resized smaller" problem described by HOCA. I was having the same problem too, using the solution outlined by this answer. After Googling around for a while, I found this threadon the sencha.com website. Using a similar technique to the one described there seems to work better cross-browser (using the exact solution offered there seems to work somewhat differently between FF/IE).
我还没有足够的声誉来“在任何地方发表评论”，但我确实解决了 HOCA 描述的“窗口缩小时无法工作”的问题。我也遇到了同样的问题，使用此答案概述的解决方案。在谷歌搜索了一段时间后，我在 sencha.com 网站上找到了这个线程。使用与那里描述的技术类似的技术似乎可以更好地跨浏览器（使用那里提供的确切解决方案在 FF/IE 之间的工作方式似乎有些不同）。
Ext.EventManager.onWindowResize(function() {
// pass "true" to get the contendWidth (excluding border/padding/etc.)
mainPanel.setWidth(Ext.getBody().getWidth(true));
// seems to be no need to call mainPanel.doLayout() here in my situation
});
回答by HOCA
In IE6 and Chrome your solution doesn't seem to work when the browser window is resized/made smaller that the original size. It does, however, resize properly when the browser window is resized larger. Does the Ext.EventManager.onWindowResize(panel.doLayout, panel)not fire when the browser window is made smaller?
在 IE6 和 Chrome 中，当浏览器窗口调整大小/缩小到原始大小时，您的解决方案似乎不起作用。但是，当浏览器窗口调整得更大时，它会正确调整大小。Ext.EventManager.onWindowResize(panel.doLayout, panel)当浏览器窗口变小时不触发吗？
回答by kathy
I solved it by setting the layout: 'fit' to the panel that contains the grid
我通过设置 layout: 'fit' 到包含网格的面板解决了这个问题
var myGridTab = new Ext.Panel({
layout: 'border',
region: 'center',
autoScroll: true,
animCollapse: false,
forceFit: true,
title: ' My Grid Tab ',
split: true,
border: false,
items: [
{
region: 'center',
**layout: 'fit',**
autoScroll: true,
items: [myGrid],
height: 150,
forceFit: true
}]
});
