动态渲染一个网格到一个组件 ExtJS答案

【问题标题】：Dynamically render a grid into a component ExtJS动态渲染一个网格到一个组件 ExtJS
【发布时间】：2018-10-26 13:31:57
【问题描述】：

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

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，但它显示在我的侧边栏位置。

【问题讨论】：

标签： extjs extjs6 extjs6.2

【解决方案1】：

尝试使用 add 方法

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

【讨论】：