sencha如何在tabpanel中动态添加标签，并将列表添加到tabpanel

我想建立一个动态的框架。首先，在“标签”中添加“ loanname”作为我的标题，以添加到标签面板。其次，动态添加我的产品，该产品的借贷名称衡量选项卡标题的借贷名称。

json中的借贷名称是我想成为每个选项卡上的标题的标题：

{
"listjson" : [
    {"loanname" : "xixi22" , "loandesc" : "use to architecture"},
    {"loanname" : "xixi2" , "loandesc" : "use to education"},
    {"loanname" : "xixi3" , "loandesc" : "use to plane and others"}
]
}

和我想要放入列表中的产品（列表中包含相同的借贷产品），然后将列表放入匹配标签：

{
"products" :[
    {"loanname": "xixi22", "loannum": "A-0000001", "interests": "6.5", "timeline": "1 year"},
    {"loanname": "xixi22", "loannum": "A-0000002", "interests": "7", "timeline": "2 year"},
    {"loanname": "xixi2", "loannum": "B-0000001", "interests": "9", "timeline": "3 year"},
    {"loanname": "xixi3", "loannum": "C-0000001", "interests": "11.5", "timeline": "4 year"}
]
}

我想要的结果视图与下图类似：但我遇到问题，列表包含标题中与借贷名称不匹配的其他产品，并显示为null

-------------编辑零件---------我的零件代码如下：

        {
            xtype: 'tabpanel',
            itemId: 'tabfirst',
            flex: 1,
            //activeItem: 1,
            tabBar: {
                layout: {
                    pack: 'center'
                }
            },
            defaultType: 'tablist'
        }

列表视图：

Ext.define('ylp2p.view.tablist',{
extend: 'Ext.dataview.List',
xtype: 'tablist',
config: {
    title: '',
    store: 'productstore',
    itemTpl: '{loanname}'
}
});

我在控制器中的代码：

Ext.define('ylp2p.controller.addtab',{
extend: 'Ext.app.Controller',

config: {
    refs: {
        myTabPanel: '.makemoney #tabfirst',
    },
    controller: {
        myTabPanel: {
            activate: 'OnActivateTabPanel',
            activateitemchange: 'OnActivateItemChangeTabPanel'
        }
    }
},
launch: function(){
    var products = Ext.getStore('productstore');

    products.filterBy(function(record, id){
       return record.get('loanname') === 'xixi22';
    });
},

OnActiveTabPanel: function(newActiveItem, viewport, oldActiveItem, eOpts){
    var tabs = Ext.getStore('loanliststore');

    tabs.each(function(record){
        newActiveItem.add({
            title: record.get('loanname')
        });
    });
},

OnActiveItemChangeTabPanel: function(cmp, value, oldValue, eOpts){
    var products = value.getStore();

    products.clearFilter(true);
    products.filterBy(function(record, id) {
        return record.get('loanname') === value.getTitle();
    });
}

});

我的商店：1.tab商店loanlist.js，2.product商店prostore.js

Ext.define('ylp2p.store.loanlist',{
extend: 'Ext.data.Store',
config:{
    model: 'ylp2p.model.list',
    storeId: 'loanliststore',
    autoload: true,
    proxy: {
        type: 'ajax',
        url: 'resources/json/loanlist.json',
        reader:{
            type: 'json',
            rootProperty: 'listjson'
        }
    }
}
});

和

Ext.define('ylp2p.store.prostore',{
extend: 'Ext.data.Store',
config: {
    model: 'ylp2p.model.loanproduct',
    storeId: 'productstore',
    autoload: true,
    proxy: {
        type: 'ajax',
        url: 'resources/json/product.json',
        reader: {
            type: 'json',
            rootProperty: 'products'
        }
    }
}
});

app.js：

Ext.application({
name: 'ylp2p',

requires: [
    'Ext.MessageBox'
],

views: [
    'ylp2p.view.Main',
    'ylp2p.view.makemoney',
    'ylp2p.view.tablist'
],

stores: [
    'ylp2p.store.datainterests',
    'ylp2p.store.loanlist',
    'ylp2p.store.picstore',
    'ylp2p.store.prostore'
],

models: [
    'ylp2p.model.data',
    'ylp2p.model.list',
    'ylp2p.model.picmodel',
    'ylp2p.model.loanproduct'
],

controllers: [
    'ylp2p.controller.viewdata',
    'ylp2p.controller.viewlist',
    'ylp2p.controller.loadpic',
    'ylp2p.controller.addtab'
],

icon: {
    '57': 'resources/icons/Icon.png',
    '72': 'resources/icons/Icon~ipad.png',
    '114': 'resources/icons/[email protected]',
    '144': 'resources/icons/[email protected]'
},

isIconPrecomposed: true,

startupImage: {
    '320x460': 'resources/startup/320x460.jpg',
    '640x920': 'resources/startup/640x920.png',
    '768x1004': 'resources/startup/768x1004.png',
    '748x1024': 'resources/startup/748x1024.png',
    '1536x2008': 'resources/startup/1536x2008.png',
    '1496x2048': 'resources/startup/1496x2048.png'
},

launch: function() {
    // Destroy the #appLoadingIndicator element
    Ext.fly('appLoadingIndicator').destroy();

    // Initialize the main view
    Ext.Viewport.add(Ext.create('ylp2p.view.Main'));
    Ext.getStore('interestsdata').load();
    Ext.getStore('loanliststore').load();
    Ext.getStore('imagestore').load();
    Ext.getStore('productstore').load();
    console.log('start Big weapon!!here is app.js launch function');       

onUpdated: function() {
    Ext.Msg.confirm(
        "Application Update",
        "This application has just successfully been updated to the latest version. Reload now?",
        function(buttonId) {
            if (buttonId === 'yes') {
                window.location.reload();
            }
        }
    );
}
});