javascript - sencha如何在tabpanel中动态添加选项卡，并将列表添加到tabpanel

Question

我想构建一个动态的框架。首先，将“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"}
]
}

我想要的结果 View 类似于以下内容:但我遇到了一个问题，列表中包含其他产品，该产品与标题中的贷款名称不匹配并显示为空

-------------编辑部分---------我的部分代码可见:

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

ListView :

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

我在 Controller 中的代码:

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.产品商店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/Icon@2x.png',
    '144': 'resources/icons/Icon~ipad@2x.png'
},

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();
            }
        }
    );
}
});

Answer 1

在 activeitemchange 监听器中，您可以根据选项卡标题 (activeitem) 过滤商店。我很快为您创建了一个 fiddle ，向您展示我将如何做到这一点:

https://fiddle.sencha.com/#fiddle/u50

var tabs = Ext.create('Ext.data.Store', {
    fields: ['loanname', 'loandesc'],
    data: [
        {"loanname" : "xixi22" , "loandesc" : "use to architecture"},
        {"loanname" : "xixi2" , "loandesc" : "use to education"},
        {"loanname" : "xixi3" , "loandesc" : "use to plane and others"}
    ]
})

var products = Ext.create('Ext.data.Store', {
    fields: ['loanname','loannum','interests','timeline'],
    data: [
        {"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"}
    ]
});

Ext.define('Fiddle.view.MyList', {
    extend: 'Ext.dataview.List',
    xtype: 'mylist',

    config: {
        title: '', // We have to config a title to let the framework generate getters and setters
        store: products,
        itemTpl: '{loannum}'
    }
});

Ext.application({
    name : 'Fiddle',


    launch : function() {
        var tabPanel = Ext.create('Ext.TabPanel', {
            fullscreen: true,
            defaultType: 'mylist',
            items: [],
            listeners: {
                activate: function( newActiveItem, viewport, oldActiveItem, eOpts) {
                    products.filterBy(function(record, id) {
                        return record.get('loanname') === 'xixi22';
                    });
                },
                activeitemchange: function( cmp, value, oldValue, eOpts ) {
                    products.clearFilter(true);
                    products.filterBy(function(record, id) {
                        return record.get('loanname') === value.getTitle();
                    });
                }
            }
        });

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