我想构建一个动态的框架。首先,添加" loanname"在标签中作为我的标题添加到tabpanel。第二,动态添加我的产品,贷款名称衡量标题标题的贷款名称。
json中的loanname是我希望成为每个标签上的标题的标题:
{
"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"}
]
}
我想要的结果视图类似于: 但我遇到一个问题,列表中包含的另一个产品与title中的loanname不匹配,并显示为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 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'
}
}
}
});
和
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();
}
}
);
}
});
答案 0 :(得分:0)
使用此代码。它会起作用。
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);
答案 1 :(得分:0)
在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',
});
});
}
});