嗨，我正在尝试在Webix jetpack中构建一个动态用户偏好界面。当用户单击布局更改按钮时，我希望通过在id中创建视图来动态更改界面的布局：“user”显示为行。我如何才能做到这一点。我尝试了几种重建方法，但都失败了。我使用webix jetpack来构建页面及其组件。

import { JetView } from "webix-jet";
import UserForm from "./forms/account.form";
import NofificationForm from "./forms/notification.form";
import ThemeForm from "./forms/theme.form";
import Profile from "./Profile";
import PrivacyForm from "./forms/privacy.form";

export default class Preference extends JetView {
  config() {
    return {
      id: "a1",
      rows: [
        {
          view: "button",
          value: "Switch Layout",
          click: () => this.switchLayout(),
        },
        {
          responsive: "a1",
          id: "user",
          cols: [
            Profile,
            {
              view: "scrollview",
              scroll: "y",
              body: {
                rows: [UserForm, NofificationForm, ThemeForm, PrivacyForm],
              },
            },
          ],
        },
      ],
    };
  }

  switchLayout() {
    const layout = this.getRoot();
    const userView = layout.queryView({ id: "user" });

    // Check the current layout state and toggle it
    if (this.isLayoutColumns) {
      // Change to rows layout
      userView.config.cols = [];
      userView.config.rows = [
        Profile,
        {
          view: "scrollview",
          scroll: "y",
          body: {
            rows: [UserForm, NofificationForm, ThemeForm, PrivacyForm],
          },
        },
      ];
    } else {
      // Change to columns layout
      userView.config.rows = [];
      userView.config.cols = [
        Profile,
        {
          view: "scrollview",
          scroll: "y",
          body: {
            rows: [UserForm, NofificationForm, ThemeForm, PrivacyForm],
          },
        },
      ];
    }

    // Update the layout state
    this.isLayoutColumns = !this.isLayoutColumns;

    // Reconstruct the layout
    layout.reconstruct();
  }
}