css - extjs2 中的表单面板布局问题

Question

我是 extjs 布局的新手。 我有一个默认布局的表单面板。我正在添加一个包含一个网格和两个按钮的字段集。我正在将一个表单面板呈现给 div。

JSP 中的 Div

<div id="mydiv"></div>

JS 中的表单面板

var fp = new Ext.FormPanel(
                {
                    standardSubmit :true,
                    id :'panel',
                    autoHeight :true,
                    layout: 'border',
                    bodyCfg: { cls: 'template' },
                    bodyPadding :10,
                    margin :'0 0 20',
                    frame :'true',
                    renderTo :'mydiv',
                    buttonAlign:'right',
                   items : [topPanel , fieldset ]
   });

我希望根据窗口大小调整表单和网格的大小(调整窗口的大小会调整元素的大小)现在如果尝试调整窗口的大小，字段集会根据窗口调整大小，但网格不会。

我现在已经给网格一个固定的高度和宽度。没有那个网格只是水平扩展。

我不想给面板、网格任何高度宽度。如何实现？正如我搜索的那样，如果我们将面板渲染到视口(viewport)，它将负责调整大小。如果是这样，那么我应该在 extjs 中创建一个视口(viewport)并将其重新生成为 div 吗？如果是，那么该怎么做？

编辑:或者我必须将 css 与 div 一起使用？

感谢任何指点。 谢谢

Answer 1

您可以创建一个视口(viewport)，正如您所说，这将负责调整大小。

在视口(viewport)中，您可以将面板添加到“元素”集合中。如果您希望面板适合视口(viewport)，您应该使用“适合”布局。

沿着这些思路的东西将是正确的想法类型:

var viewPort = new Ext.Viewport({
    id: "blaa",
    items: [fp],
    layout: "fit"
)};

我没有检查这里的语法，但你明白了。