fineui/demo/js/core/abstract/demo.virtual_group.js

import { shortcut, Widget, map, range, deepClone } from "@/core";
import { ButtonGroup } from "@/base";

@shortcut()
export class Func extends Widget {
    static xtype = "demo.virtual_group";

    props = { baseCls: "demo-func" };

    _createItems() {
        const items = map(range(1000), i => {
            return {
                type: "demo.virtual_group_item",
                value: i,
                key: i + 1,
            };
        });

        return items;
    }

    render() {
        const self = this;
        const buttonGroupItems = self._createItems();
        const virtualGroupItems = self._createItems();

        return {
            type: "bi.vertical",
            vgap: 20,
            items: [
                {
                    type: "bi.label",
                    cls: "layout-bg5",
                    height: 50,
                    text: "共1000个元素,演示button_group和virtual_group每次删除第一个元素,打开控制台看输出",
                },
                {
                    type: "bi.button_group",
                    width: 500,
                    height: 300,
                    ref() {
                        self.buttonGroup = this;
                    },
                    chooseType: ButtonGroup.CHOOSE_TYPE_MULTI,
                    layouts: [
                        {
                            type: "bi.vertical",
                        }
                    ],
                    items: this._createItems(),
                },
                {
                    type: "bi.button",
                    text: "演示button_group的刷新",
                    handler() {
                        buttonGroupItems.shift();
                        self.buttonGroup.populate(deepClone(buttonGroupItems));
                    },
                },
                {
                    type: "bi.virtual_group",
                    width: 500,
                    height: 300,
                    ref() {
                        self.virtualGroup = this;
                    },
                    chooseType: ButtonGroup.CHOOSE_TYPE_MULTI,
                    layouts: [
                        {
                            type: "bi.vertical",
                        }
                    ],
                    items: this._createItems(),
                },
                {
                    type: "bi.button",
                    text: "演示virtual_group的刷新",
                    handler() {
                        virtualGroupItems.shift();
                        self.virtualGroup.populate(deepClone(virtualGroupItems));
                    },
                }
            ],
        };
    }
}