sencha touch создать вкладки из данных магазина

Question

Я новичок в Senscha Touch, и я боролся с этим часами.

Я пытаюсь создать приложение, в котором на главной странице есть 1-3 вкладки, где заголовок и содержимое (html5) зависят от данных json.

Моя модель имеет два поля: «title» и «text». Мой магазин имеет фиктивные данные для 2-х вкладок:

Ext.define('***', { 
    extend: 'Ext.data.Store', 
    config: { 
     model: '***', 
     xtype: 'informationTabs', 
     data: [ 
      { 
       title: 'Museum', 
       text: 'Random html5' 
      }, 
      { 
       title: 'Museum_2', 
       text: 'Random html5_2' 
      }, 
      { 
       title: 'Museum_3', 
       text: 'Random html5_2' 
      } 
     ] 
    } 
}) 

Чтобы показать в виде списка у меня есть следующий код:

Ext.define('***', { 
    extend: 'Ext.Panel', 
    xtype: 'informationsTabs', 
    config: { 
     title: 'InformationTabs', 
     layout: 'fit', 
     items: [ 
      { 
       xtype: 'list', 
       store: 'InformationTabs', 
       itemTpl: '{title}, {text}' 
      } 
     ] 
    } 
}); 

Как я могу получить, что вместо того, чтобы сделать список с двумя элементами , создать две вкладки с их заголовком и текстом внутри?

Так что в этом случае у меня должно быть две вкладки. Tab 1: Title = "title_1", содержание = "random_html5" Tab 2: Title = "title_2", содержание = "random_html5_2"

Update: (спасибо! Kevhender) С помощью следующего кода он " works ", за исключением того, что я получаю дополнительный« объект объекта »в качестве первой вкладки. Этот параметр также является единственным с синим фоном при нажатии этой вкладки.

Также this.callParent(); получает «Неразрешенная функция или метод».

Ext.define('***', { 
extend: 'Ext.TabPanel', 
xtype: 'informationsTabs', 
config: { 
    title: 'informationsTabs', 

    items: [ 
     { 
      xtype: 'tabbar', 
      store: 'InformationTabs', 
      title: '', 
      html: [''] 
     } 
    ] 
}, 
initialize: function() { 
    var items = []; 
    Ext.getStore('InformationTabs').each(function(rec) { 
     items.push({ 
      title: rec.get('title'), 
      html: rec.get('text') 
     }); 
    }); 
    this.setItems(items); 
    this.callParent(); 
} }); 

скриншот: http://oi41.tinypic.com/2gsn53p.jpg

Answer 1

Поскольку магазин является динамическим, вы не сможете сделать полное определение в вашем статическом config блоке. Вы можете поместить создание табуляции в метод initialize, что-то вроде этого:

Ext.define('***', { 
    extend: 'Ext.tab.Panel', 
    xtype: 'informationsTabs', 
    config: { 
     title: 'InformationTabs', 
     layout: 'fit', 
     items: [ 
      { 
       xtype: 'list', 
       store: 'InformationTabs', 
       itemTpl: '{title}, {text}' 
      } 
     ] 
    }, 
    initialize: function() { 
     var items = []; 
     Ext.getStore('InformationTabs').each(function(rec) { 
      items.push({ 
       title: rec.get('title'), 
       html: rec.get('text') 
      }); 
     }); 
     this.setItems(items); 
     this.callParent(); 
    } 
});