PDA

View Full Version : Problem with reusing Components for Tabpanels



Tikira
6 Dec 2011, 8:17 AM
Hi there,

i try to make a Tab based Application with Navigation bar on the left.
Now i make a tab with
var tab = Ext.widget('alias',{...});
tabpanel.add(tab).show();

first time it works fine, but if i add a Second tab with Ext.widget('alias') and add it to the tabpanel, i habe the grid in the first tab in the second tab too.

How i can use my (grid)Panel multiple?

best regards

Sascha Kilian

friend
6 Dec 2011, 12:41 PM
What happens when you try this?



var tab = Ext.widget('alias',{...});
tabpanel.add(tab);
tabpanel.setActiveTab(tab);

tobiu
6 Dec 2011, 1:35 PM
make sure you are not using the same id for both instances (ideally do not use this config at all).
if that is not the problem, we need more code to help.

Tikira
7 Dec 2011, 1:33 AM
Oke, in the initComponent function i have the Ext.create(grid,store) and the ids are half-unique also, originalId+'_'+customer_id (customer id was filled with an int)

All Components of the widget (Panel) have unique Ids and the widget self too.

If i click on a customer, the first tab works fine. If i click another customer too, is the first tab empty (no grid etc.) and the second tab is filled with both grids

do this help for the problem ?

greetings from Germany

Sascha Kilian

p.s. i have now changed the adding function to
Ext.getCmp('tab-panel').add(widget);
Ext.getCmp('tab-panel').setActiveTab(widget);

flanders
7 Dec 2011, 2:03 AM
More code is neccesary to help out on this one. You should at least provide the full definition of the panels you are trying to add and the tabpanel that will contain them. In code tags, plz

Tikira
7 Dec 2011, 2:32 AM
Oke, here is the Widget


Ext.define('Linkbox.view.Satellite.SatelliteList' ,{
extend : 'Ext.Panel',
alias : 'widget.SatelliteList',
title : translator.get('title_satellite_list'),
frame : true,
height: '100%',
customer_id: null,
id: 'satelliteList',
items: [],
store: null,
initComponent: function(params) {
this.id = this.id+'_'+this.customer_id;
this.buttons = [
{
text : translator.get('cancel'),
scope : this,
handler : function() {
this.close();
}
}
];
this.store = Ext.create('Linkbox.store.SatelliteStore',{id: 'satelliteStore_'+this.customer_id});
this.items.push(Ext.create('Ext.grid.Panel',{
id: 'satellite_grid_'+this.customer_id,
store: this.store,
columns : [
{
header: translator.get('id'),
dataIndex: 'id'
},
{
header: translator.get('satellite_url'),
dataIndex: 'url',
flex: 1
},
{
header: translator.get('satellite_articles'),
dataIndex: 'articles'
},
{
header: translator.get('satellite_articles_writen'),
dataIndex: 'article_writen'
},
{
header: translator.get('satellite_articles_planed'),
dataIndex: 'article_planed'
},
{
header: translator.get('satellite_articles_online'),
dataIndex: 'article_online'
},
{
header: translator.get('satellite_articles_towork'),
dataIndex: 'article_towork'

},
{
header: translator.get('satellite_status'),
dataIndex: 'status',
renderer: function(value) {
return translator.get('satellite_status_'+value);
}
}
],
dockedItems: [
{
scope: this,
xtype: 'pagingtoolbar',
store: this.store,
dock: 'bottom',
displayInfo: true
}
]
}));
this.callParent(arguments);
}
});

And here the TabPanel its a part from viewport:


{
id: 'tab-panel',
enableTabScroll: true,
xtype: 'tabpanel',
region: 'center'
}

flanders
7 Dec 2011, 2:36 AM
Could you repost your code in code tags please? Its the # on the toolbar for the message editor.

This is unreadable

PS: My guess would be that defining non-primitives on the class definition (so in practice static) is causing the issue. Probably the items array

tobiu
7 Dec 2011, 2:53 AM
i added code tags to your posting, please do that yourself next time (# button).

as i pointed out before, look at the id:


this.id = this.id+'_'+this.customer_id;


this.id is static. do you enter a different customer id for each tab?
i do not see that in the code above.

in general as i recommended before: do not use the id config at all, there is no need for it.
take a look at itemId.

also greetings from germany!

Tikira
7 Dec 2011, 2:59 AM
Sorry for my missing Codeblock ...

the application is event controlled.

this is the event to add or show the tabs


showSatelliteListForCustomer: function(params) {
var customer = params.customer;
var tab = Ext.getCmp('tab-panel').down('SatelliteList[customer_id="'+customer.data.id+'"]');
if(tab) {
return Ext.getCmp('tab-panel').setActiveTab(tab);
} else {
var widget = Ext.create('Linkbox.view.Satellite.SatelliteList',{
customer_id: customer.data.id
});
widget.title = widget.title+' '+customer.data.name;
var store = widget.store;
store.filter('customer_id',customer.data.id);
store.load();
Ext.getCmp('tab-panel').add(widget);
Ext.getCmp('tab-panel').setActiveTab(widget);
}

},

Tikira
15 Dec 2011, 12:51 AM
No one has this problem too ?