有没有办法让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屋!