extjs2中的表单面板布局问题

Question

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

JSP中的Div

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

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

我希望窗体和网格根据窗口大小调整大小(调整窗口大小应立即调整元素大小)如果尝试调整窗口大小，则字段集将按窗口调整大小，但网格不会。

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

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

编辑:或者我必须在div中使用css？

感谢任何人的指点。谢谢

Answer 1

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

在视口中，您可以将面板添加到“items”集合中。如果你想让面板适合视口，你应该使用“适合”布局。

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

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

我还没有检查过这里的语法，但是您已经明白了。

Answer 2

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

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

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