Zaczynam rozwój aplikacji w extjs. Używam podejścia MVC, jak podano wdokumentacja extjs.

Mam pewne dynamiczne dane, które muszą przedstawić użytkownikowi zestaw elementów sterujących akordeonem. Mam dane w sklepie, ale nie wiem, jak dynamicznie tworzyć elementy akordeonu (w przeciwieństwie do paneli siatki, nie wydaje się, aby istniała metoda przechowywania danych).

Oto mój obecny kod widoku akordeonu - ze statycznymi elementami:

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 dotyczące sposobu osiągnięcia powyższego zostaną docenione, dziękuję.

[Edytuj] W odpowiedzi na prośbę sra, oto 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!');
}
});

Powinienem tutaj zauważyć, że kontroler ładuje widok nadrzędny, który z kolei ładuje widok LeftPage - nie jestem pewien, czy powoduje to problemy z zasięgiem. Ponadto, jak widać, ładowany jest więcej niż jeden sklep.