嗨,我正在尝试在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();
}
}
1条答案
按热度按时间wi3ka0sx1#
既然你用的是Jet,那就有更好的选择。
1.响应式布局
在Webix UI的复杂应用程序中,无论如何,您都需要为不同类型的屏幕创建单独的UI布局(还需要考虑移动的/不同外观模式的响应度)。为此,Webix Jet提供了一种可能性,可以设置应用程序大小和/或根据某些条件决定将呈现UI的哪个部分。这可以用任何期望的框架来实现。
有关详细说明和示例,请查看以下Jet文章。
这里也是一个响应式Jet应用程序的基本示例(如果调整演示的大小,布局将在两种模式之间切换:完整和紧凑):
https://snippet.webix.com/knv80ah9
1.按需更改布局
在这个示例中,您可以看到我如何使用相同的技术来按需更改布局。它可以是不同的布局和不同的设置,而不是
compact
,为了简单起见,我在这里重用了它。其要点是:**注意:**避免在Jet中使用
id
。使用localId
。使用id
可能会由于视图重用和非唯一ID而导致严重的bug。localId
仅在一个文件中可见,无需使其唯一。所以: