Extjs создают динамический аккордеон с помощью магазина

Я начинаю разработку приложения в extjs. Я'м с использованием подхода MVC, как предусмотрено вдокументация extjs.

У меня есть некоторые динамические данные, которые должны предоставить пользователю набор элементов управления аккордеоном. Я'У меня есть данные в магазине, но я не знаю, как динамически создавать элементы аккордеона (в отличие от панелей сетки,кажется, что это метод хранения данных).

Вот мой текущий код представления аккордеона - со статическими элементами:

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

Спасибо за любые рекомендации о том, как достичь вышеизложенного.

[Править] В ответ на сраs запрос, вот мой контроллер:

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

views: [
    'induction.Binder'
],

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

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

Я должен отметить, что этот контроллер загружает родительское представление, которое, в свою очередь, загружает представление LeftPage - I 'Я не уверен, что это создает какие-либо проблемы с областями видимости. Кроме того, как видите, загружено более одного магазина.

Ответы на вопрос(1)

Ваш ответ на вопрос