将网格动态渲染到组件 ExtJS

Question

我制作了一个带有树列表边栏的视口。我希望当我单击侧边栏中的按钮时，我用显示商店内容的网格替换屏幕的中心部分

viewport.js 创建侧边栏、顶部带有按钮的工具栏和我要显示数据的中心部分

Ext.define('DashboardDigital.view.Viewport', {
    extend: 'Ext.container.Viewport',
    requires: [
        'Ext.list.Tree',
        'Ext.list.TreeItem',
        'DashboardDigital.view.TreeListModel',
        'DashboardDigital.view.TreeListController'
    ],

    otherContent: [{
        type: 'ViewModel',
        path: 'view/TreeListModel.js'
    }, {
        type: 'Controller',
        path: 'view/TreeListController.js'
    }], 
    xtype: 'tree-list',
    title: 'TreeList',
    controller: 'tree-list',
    layout: 'border',
    shadow: true,

    viewModel: {
        type: 'tree-list'
    },

    items: [{
        xtype: 'toolbar',
        region: 'north',
        items: [{
            xtype: 'segmentedbutton',
            allowMultiple: true,
            items: [
                {
                    xtype: 'button',
                    iconCls: 'null',
                    glyph: 'xf0c9@FontAwesome',
                    onClick: function() {
                        console.log("lol");
                    }
                }
            ]
        }
        ]
    },
    {
        xtype: 'container',
        region: 'west',
        scrollable: 'y',
        items: [
            {
                xtype: 'treelist',
                reference: 'treelist',
                bind: '{navItems}'
            }]
    }, {
        xtype: 'component',
        id: 'testid',
        itemId: 'testitemid',
        region: 'center',
        cls: 'treelist-log',
        padding: 10,
        height: 50,
        bind: {
            html: '{selectionText}'
        }
    }]
});

TreeListModel.js 我在其中定义了我的侧边栏商店、要显示的商店和要显示的网格

Ext.define('DashboardDigital.view.TreeListModel', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.tree-list',

    formulas: {
        selectionText: function (get) {
            var selection = get('treelist.selection'),
                path;
            if (selection) {
                var store = Ext.create('Ext.data.Store', {
                    fields: ['name','progress'],
                    data: [
                        { name: 'Test 1', progress: 0.10 },
                        { name: 'Test 2', progress: 0.23 },
                        { name: 'Test 3', progress: 0.86 },
                        { name: 'Test 4', progress: 0.31 }
                    ]
                });

                var grid_to_add = Ext.create({
                    xtype: 'grid',
                    title: 'Widget Column Demo',
                    store: store,

                    columns: [{
                        text: 'Test Number',
                        dataIndex: 'name',
                        width: 100
                    }, {
                        xtype: 'widgetcolumn',
                        text: 'Progress',
                        width: 120,
                        dataIndex: 'progress',
                        widget: {
                            xtype: 'progressbarwidget',
                            textTpl: '{value:percent}'
                        }
                    }],

                    width: 220,
                    height: 250,
                    // renderTo: ???????????
                });
            } else {
                return 'No node selected';
            }
        }
    },

    stores: {...}

我希望显示网格而不是具有 id testid 的组件，但我不知道为 renderTo 属性设置什么。我试过 document.body 但它显示在我的侧边栏位置。

Answer 1

尝试使用添加方法

component.add(grid_to_add); 其中 component 是要添加网格的容器或面板

将网格动态渲染到组件 ExtJS

Dynamically render a grid into a component ExtJS

extjs

extjs6

extjs6.2