fineui/demo/js/core/layout/demo.table.js

import { shortcut, Widget, createItems } from "@/core";

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

    props = { baseCls: "demo-table-layout" };

    _createTable1() {
        return {
            type: "bi.table",
            items: createItems(
                [
                    [
                        {
                            el: {
                                cls: "layout-bg1",
                            },
                        },
                        {
                            el: {
                                cls: "layout-bg2",
                            },
                        },
                        {
                            el: {
                                cls: "layout-bg3",
                            },
                        }
                    ],
                    [
                        {
                            el: {
                                cls: "layout-bg4",
                            },
                        },
                        {
                            el: {
                                cls: "layout-bg5",
                            },
                        },
                        {
                            el: {
                                cls: "layout-bg6",
                            },
                        }
                    ],
                    [
                        {
                            el: {
                                cls: "layout-bg7",
                            },
                        },
                        {
                            el: {
                                cls: "layout-bg8",
                            },
                        },
                        {
                            el: {
                                cls: "layout-bg1",
                            },
                        }
                    ],
                    [
                        {
                            el: {
                                cls: "layout-bg2",
                            },
                        },
                        {
                            el: {
                                cls: "layout-bg3",
                            },
                        },
                        {
                            el: {
                                cls: "layout-bg4",
                            },
                        }
                    ],
                    [
                        {
                            el: {
                                cls: "layout-bg5",
                            },
                        },
                        {
                            el: {
                                cls: "layout-bg6",
                            },
                        },
                        {
                            el: {
                                cls: "layout-bg7",
                            },
                        }
                    ],
                    [
                        {
                            el: {
                                cls: "layout-bg8",
                            },
                        },
                        {
                            el: {
                                cls: "layout-bg1",
                            },
                        },
                        {
                            el: {
                                cls: "layout-bg2",
                            },
                        }
                    ],
                    [
                        {
                            el: {
                                cls: "layout-bg6",
                            },
                        },
                        {
                            el: {
                                cls: "layout-bg7",
                            },
                        },
                        {
                            el: {
                                cls: "layout-bg8",
                            },
                        }
                    ]
                ],
                {
                    type: "bi.layout",
                }
            ),
            columnSize: [100, "fill", 200],
            rowSize: [10, 30, 50, 70, 90, 110, 130],
            hgap: 20,
            vgap: 10,
        };
    }

    render() {
        return {
            type: "bi.grid",
            columns: 1,
            rows: 1,
            items: [
                {
                    column: 0,
                    row: 0,
                    el: this._createTable1(),
                }
                // , {
                //    column: 0,
                //    row: 1,
                //    el: this._createTable2()
                // }
            ],
        };
    }
}