extjs2中的表单面板布局问题

Question

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

JS 中JSP

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

FormPanel

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 ]
   });

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

我现在已经给网格指定了固定的高度和宽度。如果没有该网格，只需水平扩展即可。

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

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

任何指示表示赞赏。 谢谢

Answer 1

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

在视口中，您可以将面板添加到“项目”集合中。如果您希望面板适合视口，则应使用“fit”布局。

沿着这些思路的东西将是正确的想法：

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

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

Answer 2

使用锚属性。例如：anchor: '-10'在您想要此功能的任何组件上。这将根据组件的父级宽度自动调整组件的宽度。

因此，如果您的 formpanel 的 width 为 100px，则任何设置了 anchor : '-10px' 的子组件都将具有宽度 widthOfParent -anchorWidth

您还可以将布局设置为fit。这将自动将所有子组件扩展到其父组件的宽度。