有没有办法让 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.
根据我的实验，GridPanel 似乎只有在 Viewport 内时才能正确调整自身大小.例如，使用此代码，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?
推荐答案
要调整不在 Viewport 中的 Ext JS 组件的大小，您需要传递浏览器窗口调整大小事件.
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);
在您的示例中，将 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 is 一个 Panel，所以不需要包装它)，并使用布局 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屋！
