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

Question

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

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);.

将其添加到我的标签面板中

注意：这只是示例代码。根据您的要求，您必须 make/change/modify 这种代码。

文档中也给出了很多很好的例子。请看一看。 Doc

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

How to create tab panel dynamically in ExtJS?

extjs

extjs6

extjs6-classic