Search code examples
javascriptextjssencha-touchsencha-touch-2

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

i want to build a framework that dynamic. first, add "loanname" to be my title in tab to add to a tabpanel. second, dynamic add my product which the loanname measure the tab title's loanname.

the loanname in json be the title which i want to be the title on everytab:

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

and the product which i want put it in list(a list contain the same loanname product), then put the list into the match tab:

{
"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"}
]
}

the result view i want is similiar like under: but i have encounter a problem the list contain the other product which not match the loanname in title and display for null

enter image description here

-------------edit part--------- my part code in view:

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

the list view:

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

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

});

my store:1.tab store loanlist.js,2.product store 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'
        }
    }
}
});

and

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

  • In the activeitemchange listener you can filter the store based on the title of the tab (activeitem). I quickly created a fiddle for you to show you how I would do it:

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