sencha如何在tabpanel中动态添加tab，并在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"}
]
}

将我要的产品放入列表中（一个列表包含相同的loanname产品），然后将列表放入匹配选项卡中：

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

});

我的 store: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/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

使用此代码。它会起作用。

var items = [];
        var store = Ext.getStore('YourStore'); // write your store here
        var loanname = record.get('loanname');
        store.each(function (r) {
            if (r.get('loanname') == loanname) {
                items.push(r.data);
            }
        });
        var myPanel = Ext.create('Ext.List', {
            title: 'loanname',
            data: items,
            itemTpl: '{loannum}'
        });
        moneytab.add(myPanel);

Answer 2

在 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',
            });
        });
    }
});

sencha如何在tabpanel中动态添加tab，并在tabpanel中添加列表

how sencha dynamic add tab in tabpanel,and add list to the tabpanel

javascript

extjs

sencha-touch

sencha-touch-2