我想在一个更大的布局中包含一个 ExtJS GridPanel，而它又必须在我无法控制的一些预先存在的 HTML 中的特定 div 中呈现。
根据我的实验，GridPanel 似乎只有在 Viewport 内时才会正确调整自身大小。例如，使用此代码，GridPanel 会自动调整大小:
new Ext.Viewport(
{
layout: 'anchor',
items: [
{
xtype: 'panel',
title: 'foo',
layout: 'fit', items: [
{
xtype: 'grid',
// define the grid here...
但是如果我用下面的行替换前三行，它不会:
new Ext.Panel(
{
layout: 'anchor',
renderTo: 'RenderUntoThisDiv',
问题是，Viewport 总是直接渲染到 HTML 文档的主体，而我需要在特定的 div 中渲染。
如果有一种方法可以让 GridPanel 正确调整自身大小，尽管不包含在 ViewPort 中，那将是理想的。如果没有，如果我能让 Viewport 呈现 div 中的元素，我会接受的。我所有的 ExtJS 对象都可以包含在同一个 div 中。
有没有人知道如何让 GridPanel 正确调整自身大小，但仍包含在一些非 ExtJS 生成的 HTML 中？
最佳答案
要在 Ext JS 组件不在 Viewport 中时调整它们的大小，您需要传递浏览器窗口调整大小事件。
Ext.EventManager.onWindowResize(panel.doLayout, panel);
在您的示例中，将 Panel 存储到 var panel 中，然后在 var 声明之后但仍在 Ext.onReady< 中设置事件处理程序.
这是一个完整的单页解决方案:
<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 是一个 Panel，所以不需要将它包装起来)，并使用布局 fit 而不是 anchor。布局 fit 实际上是流畅布局的关键。让浏览器变小，然后变大。您会看到网格始终填满整个宽度，填充除外。
关于javascript - 有没有办法让 ExtJS GridPanel 自动调整其宽度，但仍包含在一些非 ExtJS 生成的 HTML 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2366211/