demo-tabledata-redis/src/web/src/modules/table_list/table_list.ts

import { shortcut } from '@core/core';
import { VtapeXtype, HtapeXtype, IconButtonXtype, TextValueComboXtype, ButtonXtype, TextEditorXtype, ButtonGroupXtype, VerticalXtype, MultiSelectItemXtype, LeftXtype } from 'ui';
import { ListItem } from './list_item';
@shortcut()
export class TableList extends BI.Widget {
    static xtype = 'dec.dcm.connection.plugin.redis.table_list'

    render() {
        return {
            type: VtapeXtype,
            items: [{
                el: {
                    type: HtapeXtype,
                    items: [{
                        type: TextValueComboXtype,
                        items: [],
                    }, {
                        el: {
                            type: IconButtonXtype,
                            cls: 'site-font',
                        },
                        width: 25,
                    }, {
                        el: {
                            type: IconButtonXtype,
                            cls: 'refresh-font',
                        },
                        width: 25,
                    }],
                },
                height: 25,
            }, {
                el: {
                    type: HtapeXtype,
                    items: [{
                        type: TextEditorXtype,
                        height: 24,
                        watermark: BI.i18nText('Plugin-Redis_Keys_Pattern'),
                    }, {
                        el: {
                            type: ButtonXtype,
                            minWidth: 50,
                            text: BI.i18nText('Plugin-Redis_Keys_Pattern_Search'),
                        },
                        width: 50,
                    }],
                },
                height: 25,
            }, {
                type: VtapeXtype,
                items: [{
                    type: ButtonGroupXtype,
                    layouts: [{
                        type: VerticalXtype,
                    }],
                    items: this.renderList(),
                }, {
                    el: {
                        type: LeftXtype,
                        height: 25,
                        hgap: 40,
                        items: [{
                            type: MultiSelectItemXtype,
                            width: 80,
                            selected: true,
                            text: BI.i18nText('Plugin-Redis_Table'),
                        }, {
                            type: MultiSelectItemXtype,
                            width: 80,
                            selected: true,
                            text: BI.i18nText('Plugin-Redis_View'),
                        }],
                    },
                    height: 25,
                }],
            }],
        };
    }

    private renderList() {
        return ['demo1', 'demo2'].map(item => {
            return {
                type: ListItem.xtype,
                text: item,
                value: item,
            };
        });
    }
}