Extjsストアを使用してダイナミックアコーディオンを作成する

Question

私はextjsでアプリケーションの開発を始めています。私はextjs documentationで提供されているMVCアプローチを使用しています。

私は、一連のアコーディオンコントロールをユーザーに提示する必要のある動的データを持っています。私はストア内のデータを持っていますが、グリッドパネルとは異なり、ストアデータメソッドではないように、アコーディオンアイテムを動的に作成する方法はわかりません。

Ext.define('BP.view.induction.LeftPage', { 
extend: 'Ext.Panel', 
alias : 'widget.leftpage', 

title: "Left Page", 
layout: { 
    type: 'accordion', 
    align: 'stretch' 
}, 
layoutConfig: { 
    // layout-specific configs go here 
    titleCollapse: true, 
    animate: true, 
    activeOnTop: true 
}, 
items: [{ 
    xtype: 'panel', // fake hidden panel, so all appear collapsed 
    hidden: true, 
    collapsed: false 
},{ 
    xtype: 'panel', 
    title: 'Panel 1', 
    html: 'Panel content!' 
},{ 
    xtype: 'panel', 
    title: 'Panel 2', 
    html: 'Panel content!' 
},{ 
    xtype: 'panel', 
    title: 'Panel 3', 
    html: 'Panel content!' 
}] 
}); 

上記いただければ幸いです達成する方法上の任意のガイダンスは、あなたに感謝：静的項目と -

は、ここに私の現在のアコーディオン・ビュー・コードです。

[編集] SRAの要求に応じて、ここに私のコントローラは、次のとおりです。

Ext.define('BP.controller.Induction', { 
extend: 'Ext.app.Controller', 

views: [ 
    'induction.Binder' 
], 

stores: [ 
    'Sections', 
    'Categories', 
    'Tasks' 
], 

init: function() { 
    console.log('Initialized Induction!'); 
} 
}); 

私は、このコントローラが順番にLeftPageビューをロードする親ビューをロードすることをここで注意しなければならない - 私はわかりませんスコープの問題が発生した場合。さらに、表示されるように、複数のストアがロードされています。

Answer 1

あなたはあなたの店は、少なくとも2つのプロパティが必要になります。この（いくつかの調整とテストされていない例）

Ext.define('BP.view.induction.LeftPage', { 
    extend: 'Ext.Panel', 
    alias : 'widget.leftpage', 

    title: "Left Page", 
    layout: null, 
    layoutConfig: null, 
    store: null, 
    attentive: true, 
    initComponent: function() { 
     var me = this; 
     // begin edit 
     // only set the store if is is not already defined 
     me.store = me.store ? me.store : Ext.StoreMgr.lookup('Sections'); // you may change this to any storename you want 
     // end edit 
     me.layout = { // don't set objects directly in class definitions 
      type: 'accordion', 
      align: 'stretch' 
     }; 
     me.layoutConfig = { // dont set objects directly in class definitions 
      titleCollapse: true, 
      animate: true, 
      activeOnTop: true 
     }; 

     me.callParent(arguments); 
     if (me.attentive) { 
      me.store('load', me.onRebuildContent, me); 
      if (me.store.count() == 0) 
       me.store.load(); 
     } else { 
      me.buildContent(); 
     } 
    }, 
    buildContent: function() { 
     var me = this; 
     function addItem(rec) { 
      me.add({ 
       xtype: 'panel', 
       title: rec.get('titleProperty'), 
       html: rec.get('bodyProprty') 
      }); 
     }; 

     me.store.each(addItem); 
    }, 
    onRebuildContent: function() { 
     var me = this; 
     me.removeAll(); 
     me.buildContent(); 
    } 
}); 

のように行うことができます。 1つはタイトル用、もう1つはコンテンツ用です。そして、ストアをロードしてからインスタンス化する必要があります。しかし、これはあなたのコントローラ内で簡単に行うことができます。コメントや新OPの情報に基づいて

編集：

さて、あなたのビューはビットコントローラの制御の外にあります。したがって、有効なインスタンスを受け取るためにはStoreManagerを単に使用することをお勧めします（コードを編集しましたが、使用する正しいストアがわかりませんでした）。 StoreManagerはコントローラー内にリストされていればストアについて知っています（StoreManagerはもっと可能ですが、その時点で知っておく必要があります）。さらにリリースでは、あなたはまた、ミックスインを使用することができストアは、新しいデータ読みやすくするために（更新されます）

編集を受信した後、あなたのアコーディオンを更新するために、よりクリーンなstorebindingを管理し、あなたを可能にしますbindable

私はちょうどそれを少しきれいにして、スイッチのパラメータattentiveを含んでいます。これは、このコンポーネントをストアに直接バインドしたり、すべてのロードイベントに反応させたり、ストアが既にロードされている静的なものとして使用することを可能にします。全体的にみると、これを複雑にすることなくスタートすることができます。