我正在尝试学习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)
答案 0 :(得分:1)
accordeon布局仅管理Ext.panel.Panel
个实例和子类。
来自ExtJs 6.2.1 documentation:
这是一种以可展开的手风琴风格管理多个面板的布局,默认情况下,在任何给定时间只能展开一个面板(将多个配置设置为打开更多)。每个Panel都内置了对扩展和折叠的支持。
注意:只有Ext面板和Ext.panel.Panel的所有子类可以在手风琴布局Container中使用。
因此,您无法使用Ext.Component
进行此布局。