I have the following tab.Panel, where each tab is a Ext.List, that dynamically adds the required data to its own store. However I've discovered that the second list overwrites the first list. I guess the this.getStore() is getting applied to both lists? Any thoughts on how to fix this?
Code:
Ext.define("test.view.MyFriends", {
extend: 'Ext.tab.Panel',
xtype: 'myfriends',
requires: [
'test.view.MyFriendsList',
'test.view.MyFriendRequestsList'
],
config: {
fullscreen: true,
title: 'My Friends',
items: [
{
xtype: 'myfriendslist'
},
{
xtype: 'myfriendrequestslist'
}
]
}
});
Where each of the tabs are:
Code:
Ext.define('test.view.MyFriendsList', {
extend: 'Ext.List',
xtype: 'myfriendslist',
config: {
title: 'Accepted',
onItemDisclosure: true,
autoLoad: true,
grouped: true, // if true, the model must define grouper
indexBar: true, // adds the A, B, C index on the right
itemTpl: '{first_name}',
store: 'MyFriends'
},
initialize: function() {
this.callParent(); // required to make back button work
console.log("MyFriendsList init");
store = this.getStore();
Ext.Ajax.request({
url: 'backend/search_users.php',
method: 'post',
params: {
friends: true
},
scope: this,
failure : function(response){
Ext.Msg.alert(this.title, "Connection lost, please try again later");
},
success: function(response, opts) {
var data = Ext.decode(response.responseText);
console.log(data);
if (data.success) {
store.removeAll();
for (var i = 0; i < data.count; i++) {
store.add({
id: data.data[i].id,
first_name: data.data[i].first_name,
is_private_profile: data.data[i].is_private_profile
});
}
} else {
Ext.Msg.alert(this.title, "Failed to process request");
}
}
});
}
});
Code:
Ext.define('test.view.MyFriendRequestsList', {
extend: 'Ext.List',
xtype: 'myfriendrequestslist',
config: {
title: 'Requests',
onItemDisclosure: true,
autoLoad: true,
grouped: true, // if true, the model must define grouper
indexBar: true, // adds the A, B, C index on the right
itemTpl: '{first_name}',
store: 'MyFriendRequests'
},
initialize: function() {
this.callParent(); // required to make back button work
console.log("MyFriendRequestsList init");
store = this.getStore(); // this gets the MyFriends store from the first tab (seen above) - why?
Ext.Ajax.request({
url: 'backend/search_users.php',
method: 'post',
params: {
requests: true
},
scope: this,
failure : function(response){
Ext.Msg.alert(this.title, "Connection lost, please try again later");
},
success: function(response, opts) {
var data = Ext.decode(response.responseText);
console.log(data);
if (data.success) {
store.removeAll();
for (var i = 0; i < data.count; i++) {
store.add({
id: data.data[i].id,
first_name: data.data[i].first_name,
is_private_profile: data.data[i].is_private_profile
});
}
} else {
Ext.Msg.alert(this.title, "Failed to process request");
}
}
});
}
});
Unanswered: How do correctly dynamically load different stores which is on two tabs ofa tab.Panel
Reply With Quote