Как создать динамические вкладки из столбца сетки при загрузке страницы в extjs

Question

Я генерирую данные на сетке с помощью магазина json.Я должен генерировать вкладки из содержимого столбца 1 при загрузке страницы.Как я могу сгенерировать эти динамические вкладки из столбца 1?

Answer 1

Спасибо!Я придерживаюсь того же подхода, но когда я зацикливаюсь на вкладках, он не может динамически добавлять вкладки.Я уверен, что мой цикл работает должным образом, потому что я поставил предупреждение, и он зацикливается на всех записях.Мой код ниже ... Пожалуйста, дайте мне знать, где я не прав ..

var store = new Ext.data.JsonStore({
autoLoad: true,
url: '../json/test.json',
root: 'results',
fields: 
[
            'TIEBACK',
            'GATE_TIME',
            'TOTAL',
            'STOP_DESC',
            'DOOR'
],

sortInfo: {
    field: 'TIEBACK', direction: 'ASC'
}

});

моя вкладка:

 tabPanel = new Ext.TabPanel({
                region: 'center', 
                deferredRender: false,
                activeTab: 0,     
                items: [{
                                xtype: 'grid',
                                store: store,
                                //selModel: selModel,
                                columns: assignment,
                                stripeRows: true,
                                loadMask: true,
                                height: 200,
                                width: 200,
                                x: 490, y: 620,
                                title:'Assignment Status',
                                bbar: pagingBar




                    }]
});

loop:

   store.on('load', function(){
             store.each(function(re)
             {
                var tieback = re.get('TIEBACK');
                //alert(tieback);
                tabPanel.add(tieback);
             });
         });

Answer 2

Итак, у вас есть хранилище JSON, что-то вроде этого

var store = new Ext.data.JsonStore({
    // store configs
    autoDestroy: true,
    url: 'get-images.php',
    storeId: 'myStore',
    // reader configs
    root: 'images',
    idProperty: 'name',
    fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
});

Затем вы можете добавить функцию обратного вызова в хранилище, которое запускается при загрузке.Это документация по этой функции

load : ( Store this, Ext.data.Record[] records, Object options )

,

store.addListener(load, function(store, records, options){
    // loop over records and dynamically create tabs here
});

Так что если у вас есть такая панель вкладок

var tabs = new Ext.TabPanel({
        renderTo:'tabs',
        resizeTabs:true, // turn on tab resizing
        minTabWidth: 115,
        tabWidth:135,
        enableTabScroll:true,
        width:600,
        height:250,
        defaults: {autoScroll:true},
        plugins: new Ext.ux.TabCloseMenu()
    });

Вы можете динамически добавлять вкладки вэто так

tabs.add({
        title: 'New Tab ' + (++index),
        iconCls: 'tabs',
        html: 'Tab Body ' + (index) + '<br/><br/>'
              + Ext.example.bogusMarkup,
        closable:true
    }).show();

Это должно быть все, что вам нужно, больше документации можно найти здесь.

http://www.sencha.com/deploy/dev/examples/tabs/tabs-adv.html