Я сделал макет панели вкладок с дизайнером extjs

Question

Я сделал макет панели вкладок с конструктором extjs, но он не отображается, если я его запускаю.

Вот код, пожалуйста, помогите мне:

Ext.onReady(function(){
    Ext.BLANK_IMAGE_URL = 'extjs/s.gif';
    Ext.onReady(function(){
        MyTabPanelUi = Ext.extend(Ext.TabPanel, {
            activeTab: 0,
            width: 800,
            height: 500,
            title: 'Ledger',
            itemId: 'ledger_tab',
            initComponent: function() {
                this.items = [
                {
                    xtype: 'panel',
                    title: 'Ledger',
                    autoScroll: true,
                    items: [
                    {
                        xtype: 'editorgrid',
                        title: 'Ledger',
                        store: 'store',
                        height: 150,
                        footer: true,
                        stripeRows: true,
                        header: true,
                        loadMask: true,
                        id: 'leg_grid_up',
                        columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'string',
                            header: 'Column',
                            sortable: true,
                            width: 100,
                            editor: {
                                xtype: 'textfield'
                            }
                        },
                        {
                            xtype: 'numbercolumn',
                            dataIndex: 'number',
                            header: 'Column',
                            sortable: true,
                            width: 100,
                            align: 'right',
                            editor: {
                                xtype: 'numberfield'
                            }
                        },
                        {
                            xtype: 'datecolumn',
                            dataIndex: 'date',
                            header: 'Column',
                            sortable: true,
                            width: 100,
                            editor: {
                                xtype: 'datefield'
                            }
                        },
                        {
                            xtype: 'booleancolumn',
                            dataIndex: 'bool',
                            header: 'Column',
                            sortable: true,
                            width: 100,
                            editor: {
                                xtype: 'checkbox',
                                boxLabel: 'BoxLabel'
                            }
                        }
                        ],
                        tbar: {
                            xtype: 'toolbar',
                            height: 50,
                            items: [
                            {
                                xtype: 'container',
                                layout: 'column',
                                width: 794,
                                height: 43,
                                items: [
                                {
                                    xtype: 'spacer',
                                    width: 588,
                                    height: 18
                                },
                                {
                                    xtype: 'spacer',
                                    width: 200,
                                    height: 18
                                },
                                {
                                    xtype: 'datefield'
                                }
                                ]
                            }
                            ]//toolbar items
                        }
                    },
                    {
                        xtype: 'container',
                        height: 70
                    },
                    {
                        xtype: 'editorgrid',
                        title: 'Ledger',
                        height: 150,
                        id: 'leg_grid_down',
                        columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'string',
                            header: 'Column',
                            sortable: true,
                            width: 100,
                            editor: {
                                xtype: 'textfield'
                            }
                        },
                        {
                            xtype: 'numbercolumn',
                            dataIndex: 'number',
                            header: 'Column',
                            sortable: true,
                            width: 100,
                            align: 'right',
                            editor: {
                                xtype: 'numberfield'
                            }
                        },
                        {
                            xtype: 'datecolumn',
                            dataIndex: 'date',
                            header: 'Column',
                            sortable: true,
                            width: 100,
                            editor: {
                                xtype: 'datefield'
                            }
                        },
                        {
                            xtype: 'booleancolumn',
                            dataIndex: 'bool',
                            header: 'Column',
                            sortable: true,
                            width: 100,
                            editor: {
                                xtype: 'checkbox',
                                boxLabel: 'BoxLabel'
                            }
                        }
                        ],
                        tbar: {
                            xtype: 'toolbar'
                        }
                    },
                    {
                        xtype: 'container'
                    }
                    ]//ledger panel
                }
                ];//this
                MyTabPanelUi.superclass.initComponent.call(this);
            }
        });
    });
});

Answer 1

Вам нужно отобразить его на какой-нибудь тег HTML.Вы можете использовать свойство renderTo для рендеринга панели в тег body или некоторый тег div с набором id.

Предположим, вы планируете визуализировать тег body.Вам нужно добавить renderTo : Ext.getBody().Метод Ext.getBody просто возвращает тег body.

MyTabPanelUi = Ext.extend(Ext.TabPanel, {
            activeTab: 0,
            width: 800,
            height: 500,
            renderTo: Ext.getBody(),
            .
            .
            .

Answer 2

Вы не рендерите это.

Попробуйте отрендерить его в Ext.getBody ():

MyTabPanelUi.render(Ext.getBody());