Question

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

目前，我有：

container-＆gt; items-＆gt; layout：vbox-＆gt; items-＆gt; layout：{type：column，columns：2} - ＆gt; items-＆gt; my forms（由组合框和文本字段组成）

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

Answer 1

如果要使用column布局实现此目的，可以侦听resize事件并调整处理函数中的列百分比。处理函数可能如下所示：

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

这需要在正在调整的面板上定义名为narrow的属性。您可以设置narrow = 700以在宽度小于700时使用单个列布局，否则保留原始布局。 originalColumnWidth在第一次执行时保存，因此如果将表单调整为足够宽以容纳多列，则可以恢复它。

See fiddle here以示例形式。

（使用responsive插件可以获得类似的结果。请参阅fiddle）。

ExtJS自动调整表单

1 个答案: