Question

我正在尝试学习ExtJ并使用不同的Container布局。我创建了三个组件并尝试将它们添加到具有手风琴布局的Container中。但是没有任何内容显示在页面中。如果我用面板替换组件，那么它工作正常。

这是我的HTML。

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Container practice</title>
<link
    href="C:\Users\bhapanda\Documents\extjs\library\ext-6.2.1\build\classic\theme-classic\resources\theme-classic-all.css" rel="stylesheet">
<script type="text/javascript"
    src="C:\Users\bhapanda\Documents\extjs\library\ext-6.2.1\build\ext-all.js"></script>
<script type="text/javascript">
    Ext.onReady(
        function(){
                var component1 = Ext.create('Ext.Component',
                    {
                        title:'Component one',
                        html:'Hi.. This is component one'
                    }
                );
                var component2 = Ext.create('Ext.Component',
                    {
                        title:'Component two',
                        html:'Hi.. This is component two'
                    }
                );
                var component3 = Ext.create('Ext.Component',
                    {
                        title:'Component three',
                        html:'Hi.. This is component three'
                    }
                );
                Ext.create('Ext.container.Container',
                    {
                        renderTo:Ext.getBody(),
                        layout:'accordion',
                        width:600,
                        items:
                            [
                                component1,
                                component2,
                                component3
                            ]
                    }
                );
        }
    );
</script>
</head>
<body>
<div id="myPanel"></div>
</body>
</html>

这是我在浏览器控制台中的错误。

Uncaught TypeError: d.addBodyCls is not a function
    at F.beforeRenderItems (ext-all.js:17)
    at F.renderItems (ext-all.js:17)
    at F.renderChildren (ext-all.js:17)
    at F.invalidate (ext-all.js:17)
    at F.flushInvalidates (ext-all.js:17)
    at F.run (ext-all.js:17)
    at Function.flushLayouts (ext-all.js:17)
    at Function.resumeLayouts (ext-all.js:17)
    at Object.Ext.resumeLayouts (ext-all.js:17)
    at F.render (ext-all.js:17)

Answer 1

accordeon布局仅管理Ext.panel.Panel个实例和子类。来自ExtJs 6.2.1 documentation：

这是一种以可展开的手风琴风格管理多个面板的布局，默认情况下，在任何给定时间只能展开一个面板（将多个配置设置为打开更多）。每个Panel都内置了对扩展和折叠的支持。

注意：只有Ext面板和Ext.panel.Panel的所有子类可以在手风琴布局Container中使用。

因此，您无法使用Ext.Component进行此布局。

当多个组件位于其中时，无法显示具有手风琴布局的Container

1 个答案: