ExtJS 自动调整表单大小

Question

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

目前，我有：

container->items->layout:vbox->items->layout:{type:column,columns:2}->items->my forms（由组合框和文本字段组成）

当我调整到较小的宽度时，我希望它是一列。目前它将保留 2 列，并且 space 太小而无法适应 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 自动调整表单大小

ExtJS auto-resize form

javascript

extjs

extjs5