が動的に内線JS「ローダー」を使用してアイテム

Question

私は内線のJSと初心者だをロードすると、クライアントは私がEXT JS 4.0を使用しています、それで私の頭を粉砕だ、私はいくつかのウェブでそれを使用したい、そう。 7とMVCと呼ぶもの。ここで私は行く。

私は「カードレイアウト」と「パネル」を作成しています、と私はアイテムが動的にロードされるようにしたいので、私は「ローダー」を使用しています。ここに私がやっていることの例があります

//the panel 
{ 
    xtype:'panel', 
    id: 'options-panel', 
    title: 'Options', 
    region:'north', 
    layout:"card", 
    activeItem:0, 
    height: 200, 
    autoScroll: true, 
    items:{ 
    loader:{ 
     autoLoad : true, 
     url: '/staticdata/menu-toolbar-data.json', 
     renderer: "component" 
    } 
    } 
} 

//example data file menu-toolbar-data.json 
[ 
    { 
    xtype:'toolbar', 
    vertical: true, 
    height: 173, 
    id:"button1-toolbar", 
    layout: { 
     type: 'vbox', 
     align : 'stretch', 
     pack : 'start' 
    }, 
    items: [ 
     { 
     text: 'Gestion Button1', 
     enableToggle: true 
     },'-', 
     { 
     text: 'Selection Button1', 
     enableToggle: true 
     } 
    ] 
    }, 
    { 
    xtype:'toolbar', 
    vertical: true, 
    height: 173, 
    id:"button2-toolbar", 
    layout: { 
     type: 'vbox', 
     align : 'stretch', 
     pack : 'start' 
    }, 
    items: [ 
     { 
     text: 'G Button2', 
     enableToggle: true 
     },'-',{ 
     text: 'S Button2', 
     enableToggle: true 
     } 
    ] 
    } 
] 

これまでのところ、私はボタンで最初のツールバーを見ることができます。これは問題ありませんが、2番目のツールバーをアクティブにしようとすると、エラーが発生します。放火犯で

Ext.getCmp('options-panel').layout.setActiveItem(1); 

、私はコンソールでこれを見ることができます：私はこれを使用してい

TypeError: component is undefined 
http://www.learningext.com.localhost/extjs/src/ComponentManager.js?_dc=1330059491008 
Line 55 

ここで面白いのは、私は.jsonファイルからコードをコピーして貼り付けた場合ということです「パネル」の「アイテム」には、「ローダー」を使用しないことを意味しています。すべて正常に動作します。 「ローダー」を保持しているがパネルのレイアウトを変更した場合は、2つのツールバーが表示されますので、ここでは何が分かりませんか？ローダーが正常に動作しないのですか？何か間違っていますか？あなたが私を助けてくれることを願っています。

ありがとうございました

Answer 1

Ext.Loaderはフルクラスの読み込み専用です。 JSONブロックをコンテナの子アイテムとしてロードするためにロードする場合は、ComponentLoaderクラスを使用できます。

は、ここでの例をいくつかあります：http://dev.sencha.com/deploy/ext-4.0.0/examples/component-loader/component-loader.html

最後のうち、おそらくあなたが達成しようとしているものの一種です。