CODEWITHSUNDEEP
extjs
Bhawani shankar Panda
Bhawani shankar Panda

Reputation: 353

Unable to display Container with accordion layout when multiple Components are inside it

I am trying to learn ExtJs and playing with different layouts of Container. I have created three Components and trying to add them into a Container with accordion layout. But the nothing is getting displayed in the page. If I replace the Components with Panels, then it's working fine.

Here is my 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>

Here is my the error in browser console.

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)

Upvotes: 0

Views: 559

Answers (1)

And-y
And-y

Reputation: 1524

The accordeon layout manages only Ext.panel.Panel instances and subclasses. From the ExtJs 6.2.1 documentation:

This is a layout that manages multiple Panels in an expandable accordion style such that by default only one Panel can be expanded at any given time (set multi config to have more open). Each Panel has built-in support for expanding and collapsing.

Note: Only Ext Panels and all subclasses of Ext.panel.Panel may be used in an accordion layout Container.

So you can not use Ext.Component for this layout.

Upvotes: 1

Related Questions