Extjs stwórz dynamiczny akordeon za pomocą sklepu

Question

Rozpoczynam tworzenie aplikacji w extjs. Używam podejścia MVC, jak podano w extjs documentation.

Mam pewne dynamiczne dane, które muszą przedstawiać użytkownikowi zestaw kontroli akordeonu. Mam dane w sklepie, ale nie wiem, jak dynamicznie tworzyć elementy akordeonu (w przeciwieństwie do paneli gridowych, nie wydaje się, że jest to metoda danych sklepu).

Tu jest mój bieżący kod widok akordeon - z elementów statycznych:

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!' 
}] 
}); 

Wszelkie wskazówki, w jaki sposób osiągnąć powyższe byłoby mile widziane, dziękuję.

[Edit] W odpowiedzi na żądanie SRA, oto jest mój kontroler:

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

views: [ 
    'induction.Binder' 
], 

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

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

Należy zauważyć tutaj, że ten regulator ładuje widok rodzica, który z kolei ładuje pogląd LeftPage - Nie jestem pewien, jeśli spowoduje to problemy z określaniem zakresu. Ponadto, jak widać, załadowano więcej niż jeden sklep.

Answer 1

Można zrobić tak (niesprawdzone przykład z pewnymi ulepszeniami)

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(); 
    } 
}); 

Twój sklep będzie musiał co najmniej dwie właściwości; jeden dla tytułu i jeden dla treści. A sklep musi zostać załadowany, zanim powinieneś go utworzyć. Ale można to łatwo zrobić w kontrolerze.

Edit oparte na komentarz i nowych informacji OP:

Dobrze Państwa zdanie jest nieco poza kontrolą sterownika. Polecam więc, aby po prostu użyć StoreManager, aby otrzymać poprawną instancję (edytowałem kod, po prostu nie znałem właściwego sklepu do użycia). StoreManager będzie wiedział o sklepie tak długo, jak będziesz go wymieniać w kontrolerze (StoreManager może o wiele więcej, ale to wszystko, co musisz wiedzieć w tej chwili). W celu dalszego uwalniania można również użyć wstawek bindable które mogłyby zarządzać storebinding bardziej czyste i pozwala zaktualizować akordeonie po sklep otrzymuje nowe dane (Get Aktualizacja)

Edycja dla czytelności

Po prostu posprzątałem trochę i włączono parametr przełącznika attentive, który pozwoliłby ci użyć tego komponentu jako bezpośrednio związanego ze sklepem, reagując na wszystkie zdarzenia obciążenia lub jako rodzaj statycznego, w którym sklep powinien już być załadowany. W sumie to powinno dać ci początek, nie czyniąc go skomplikowanym.