如何在ExtJS中动态创建标签面板？

Question

我有一个模型，并在我的代码中存储。根据功能，我想从商店动态创建选项卡。你能分享代码片段吗？假设有相应的模型和商店。

Answer 1

为此，您首先需要创建Tab平板

datatabpanel = Ext.create('Ext.tab.Panel', { 
       layout: 'card', 
      }), 

，然后里面标签面板您add你的元素。在这种情况下，我给出了添加网格到标签面板的例子。

我们首先使用Ajax进行响应，并从响应中构建网格。网格准备就绪后，我们将动态添加到选项卡面板。

load: function() { 
    var url = '', 
    proxyMethod = 'GET'; 
    url = SomeURL; 
    Ext.Ajax.request({ 
      url: url, 
      headers: { 
       "Accept": "application/json; charset=utf-8", 
       'X-HTTP-Method-Override': "PUT" 
      }, 
      success: function(res, args) { 
       var data = Ext.decode(res.responseText); 
       me.view.mainData = data; 
       if (data.ROOT.DATA) { 
        me.buildGrids(data.ROOT.DATA.D, data.ROOT.HEADER); 
       } 
      } 
     }) 
    } 




buildGrids: function(data, metaData) { 
     var p = this, 
      me = p.view, 
      cnt = me.down("container[name=gridtabs]"), // This is your container where you placing your grid. You named that as gridtabs. 
      datatabpanel = Ext.create('Ext.tab.Panel', { 
       layout: 'card', 
      }), 
      newdatagrids = []; 
     data = Ext.isObject(data) ? [data] : data; 
     for (var i = 0; i < data.length; i++) { 
      var value = data[i].NAME; // You can extract from your attributes. 
      var datasetgrids = Ext.create({ 
       xtype: 'SomeGrid', 
       storeXml:{"ROOT":{ "DATA":data[i],"HEADER":metaData}}, // This is also depended on how to data is coming. 
       gridId: data[i]["ID"], 
      }); 
      newdatagrids.push(datasetgrids); 
     } 
     cnt.removeAll(); 
     datatabpanel.add(newdatagrids); 
     datatabpanel.setActiveTab(0); 
     cnt.add(datatabpanel); 
    }, 

在代码中你可以看到，我们正在创建一个阵列newdatagrids，然后通过使用newdatagrids.push(datasetgrids);

一旦我newdatagrids准备好我正在使用datatabpanel.add(newdatagrids);添加此我一个tabpanel puting我网到这个阵列。

注意：这只是示例代码。您必须根据您的要求制作/更改/修改此类代码。

还有很多很好的例子在文档中给出。请看一看。 Doc