我用extjs设计师制作了一个tab面板的布局

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标记或带有id集的div标记。

假设您计划渲染到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());