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

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

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

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

1 个答案: