как sencha dynamic добавить вкладку в tabpanel и добавить список в tabpanel

Question

Я хочу построить фреймворк, который динамический. во-первых, добавьте «loanname», чтобы быть моим заголовком на вкладке, чтобы добавить к вкладке. Во-вторых, динамический добавить мой продукт, который loanname измеряет имя заглавной буквы.

loanname в формате JSON быть заголовок, который я хочу быть название на everytab:

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

вид результата я хочу похож, как в: , но у меня есть столкнулся с проблемой, список содержит другой продукт, который не совпадает с loanname в названии и отображении для нулевой

------------- редактировать часть --------- моя часть кода в виду:

 { 
      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/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). Я быстро создал скрипку для вас, чтобы показать вам, как я хотел бы сделать это:

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

Answer 2

Используйте этот код. Это будет работать.

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