Javascript ExtJS自动调整表单大小

我使用的是Extjs5，我有一个表单，希望它能够根据容器自动调整大小

目前，我有：

容器->项目->布局：vbox->项目->布局：{type:column，columns:2}->项目->我的表单（由组合框和文本字段组成）

---

当我调整到一个小的宽度，我希望它是一列。目前，它将保留2列，空间将太小，不适合2列设计。有没有办法将其调整为1列？

如果您想通过

列

布局实现这一点，可以侦听

调整大小

事件，并在处理程序函数中调整列百分比。处理程序函数可能如下所示：

formResize = function (item, width, height, oldWidth, oldHeight, eOpts) {
    if (!item.narrow) return;
    if (oldWidth === undefined) oldWidth = 9999999;
    if (oldHeight === undefined) oldHeight = 9999999;
    item.suspendLayouts();
    if (width <= item.narrow && oldWidth > item.narrow) {
        item.items.each(function (item, i) {
            if (!item.originalColumnWidth) item.originalColumnWidth = item.columnWidth;
            item.columnWidth = 1;
        });
    }
    if (width > item.narrow && oldWidth <= item.narrow) {
        item.items.each(function (item, i) {
            item.columnWidth = item.originalColumnWidth;
        });
    }
    item.resumeLayouts(true);
};

formResize=函数（项目、宽度、高度、旧宽度、旧高度、eOpts）{
如果（！item.窄）返回；
如果（oldWidth==未定义）oldWidth=999999；
如果（oldHeight==未定义）oldHeight=999999；
item.suspendLayouts（）；
if（宽度项目。窄）{
项目。项目。每个（功能）（项目，i）{
如果（！item.originalColumnWidth）item.originalColumnWidth=item.columnWidth；
item.columnWidth=1；
});
}
如果（width>item.窄和&oldWidth如果只想显示一列，第二列会发生什么？@MaxDeepfield:那么在这种情况下，表单将采用其父容器的宽度。user1679887:没有这样的配置可以帮助您实现这一点。您需要使用自定义表单设计来实现这一点。@MaxDeepfield我希望所有的text字段和组合框以垂直方式放入一列中。即1个组件1行。目前，两列是一行中的两个组件。我希望我有意义。用户：请使用一些提琴来说明您的答案。您需要的不是一个包含两列的列布局，而是一个包含两个容器的
hbox
布局，其中包含
flex:1
。当浏览器窗口变小时，您可以使用
setLayout（{vertical:true}）
将hbox布局转换为vbox布局，当它再次变大时，您可以通过再次设置
vertical:false
将其转换回原来的布局。谢谢我已经实现了您的方法，它可以正常工作。谢谢：）