2017-02-06 10 views
0

ExtJsを学習し、コンテナのさまざまなレイアウトで再生しようとしています。 3つのコンポーネントを作成し、それらをアコーディオンレイアウトのコンテナに追加しようとしました。 しかし、何もページに表示されていません。 コンポーネントをパネルに置き換えると、正常に動作しています。複数のコンポーネントが内部にあるときに、アコーディオンレイアウトのコンテナを表示できません

ここは私の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) 

答えて

1

accordeonレイアウトは、Ext.panel.Panelインスタンスとサブクラスのみを管理します。 ExtJs 6.2.1 documentationから :

これが(もっと開いているために、マルチコンフィグを設定)はデフォルトで唯一のパネルは、任意の時点で展開することができるように拡張可能なアコーディオンスタイルで複数のパネルを管理したレイアウトです。各パネルには、拡張と折りたたみのサポートが組み込まれています。

注:拡張パネルとExt.panel.Panelのすべてのサブクラスのみが、アコーディオンレイアウトコンテナで使用できます。

したがって、Ext.Componentをこのレイアウトに使用することはできません。

関連する問題