时间戳

首页 > 解决方案 > ExtJS - 我怎样才能让一个面板显示在另一个面板中（它当前显示一个空白屏幕）？

javascript - ExtJS - 我怎样才能让一个面板显示在另一个面板中（它当前显示一个空白屏幕）？

问题描述

Ext.define('something', {
    extend: 'Ext.panel.Panel',
    layout: 'border',
    constructor: function(config){
        let me = this;
        me.callParent(arguments);
        me.initConfig(config);

}
});

好的，假设我正在如上所述定义我的课程。稍后在我的代码中，如果我希望在构造函数中执行以下操作：

                let mainPan = Ext.create("Ext.panel.Panel", {
                    layout: 'border',
                    items: [
                        something,
                        something else
                    ]
                });

               this.add(mainPan);

有什么方法可以让我添加 mainPan 并让它正确显示吗？当我尝试这个时，我基本上得到一个白屏，我认为这是由于嵌套问题（在面板中有一个面板）？

标签： javascriptextjs

解决方案

创建面板时，您的实施存在一些问题。

这是一个定义的面板，允许您使用“xtype”将其添加到其他视图

Ext.define('something', {
        extend: 'Ext.panel.Panel',
        alias: 'widget.something',
        title: 'Inner Panel',
        height: 200,
        border: true,
        style: {
            border: '1px solid black'
        },
    });

这是使用“创建”的第二个面板的代码，然后使用添加第一个面板

xtype：'东西'

let mainPan = Ext.create("Ext.panel.Panel", {
        title: 'Here we are',
        border: true,
        style: {
            border: '1px solid black'
        },
        bodyPadding: 10,
        items: [{
            xtype: 'something'
        }]
    });

这里是Fiddle的链接，显示它使用 Ext JS 7 和现代框架工作。

推荐阅读