如何在頁面加載中創建動態選項卡在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：

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 




        }] 
}); 

循環：

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

一個個tabpanel您可以動態地添加標籤給它這樣

文檔

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

那應該是b e你需要的一切，更多的文檔可以在這裏找到。

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