Динамически отображать сетку в компонент ExtJS - PullRequest
Новая
       24

Динамически отображать сетку в компонент ExtJS

0 голосов
/ 26 октября 2018

Я сделал окно просмотра с боковой панелью древовидного списка.Я хочу, чтобы при нажатии кнопки на боковой панели я заменял центральную часть экрана сеткой, отображая содержимое магазина

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

Я хочу, чтобы сетка отображалась вместо компонента с идентификатором testid, и я не знаю, что установить для свойства renderTo.Я пробовал document.body, но он отображается у моей боковой панели.

1 Ответ

0 голосов
/ 29 октября 2018

попробуйте использовать метод добавления

component.add(grid_to_add);, где компонент - это контейнер или панель, куда вы хотите добавить сетку

...