Dynamically render a grid into a component ExtJS

Question

I made a viewport with a treelist sidebar. I want that when i click a button in my sidebar, I replace the center part of the screen by a grid display a store content

viewport.js creating a side bar, a tool bar with a button on top and a center part where i want to display my data

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 where i defined my store for the side bar, a store to display, and the grid to display

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: {...}

I want the grid to be displayed instead of the component with the id testid and i don't know what to set for renderTo property. I tried document.body but it's displayed at my sidebar's place.

Answer 1

try using add method

component.add(grid_to_add); where component is the container or panel where you want to add the grid