有没有办法让ExtJS GridPanel自动调整其宽度，但仍然包含在一些非ExtJS生成的HTML中？ [英] Is there any way to get an ExtJS GridPanel to automatically resize its width, but still be contained inside some non-ExtJS-generated HTML?
问题描述
我想在一个较大的布局中包含一个ExtJS GridPanel ，而这些布局又必须在一些我不能控制的预先存在的HTML中的特定div中呈现
I want to include an ExtJS GridPanel inside a larger layout, which in turn must be rendered inside a particular div in some pre-existing HTML that I don't control.
从我的实验中，如果$ code> GridPanel 只能在视口。例如，使用此代码， GridPanel 自动调整大小：
From my experiments, it appears that the GridPanel only resizes itself correctly if it's within a Viewport. For instance, with this code the GridPanel automatically resizes:
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',
麻烦的是， Viewport 总是直接呈现到HTML文档的正文，我需要在一个特定的div中渲染。
The trouble is, Viewport always renders directly to the body of the HTML document, and I need to render within a particular div.
如果有一种方法可以获得 GridPanel 来自己调整大小正确的，尽管不包含在 ViewPort 中，这将是理想的。如果没有，如果我可以得到 Viewport 来渲染div中的元素，那么我会很好的。所有的ExtJS对象都可以包含在相同的div中。
If there is a way to get the GridPanel to resize itself correctly, despite not being contained in a ViewPort, that would be ideal. If not, if I could get the Viewport to 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正确调整大小，但仍然包含在一些非-ExtJS生成的HTML？
Does anybody know of a way to get a GridPanel to resize itself correctly, but still be contained inside some non-ExtJS-generated HTML?
推荐答案
如果Ext JS组件不在 Viewport ，您需要传递浏览器窗口大小调整事件。
To resize Ext JS components when they are not in a Viewport, you need to pass along browser window resize events.
Ext.EventManager.onWindowResize(panel.doLayout, panel);
在您的示例中，将面板 var panel ，然后在var声明之后设置事件处理程序，但仍然位于 Ext.onReady 中。
In your example, store the Panel into var panel, and then set up the event handler after the var declaration but still inside of 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>
请注意，我已经删除了冗余面板（ GridPanel 是 a 面板，所以不需要包装），并使用布局 fit 而不是 anchor 。布局 fit 实际上是流体布局的关键。使浏览器更小，然后更大。您将看到网格总是填充整个宽度，除了填充之外。
Note that I've removed the redundant panel (a GridPanel is a Panel, so no need to wrap it), and used layout fit instead of anchor. Layout fit is 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.
这篇关于有没有办法让ExtJS GridPanel自动调整其宽度，但仍然包含在一些非ExtJS生成的HTML中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
