如何在 ExtJS 中动态创建选项卡面板？

Question

我有一个模型并存储在我的代码中。根据功能，我想从商店动态创建标签。你能分享代码sn-p吗？假设有对应的model和store。

Answer 1

为此，您首先需要创建选项卡面板

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); 将其添加到我的标签面板中。

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

文档中也有很多很好的例子。请看一看。 Doc