View Full Version : Reload tab data on tabchange

30 Nov 2013, 10:33 AM
Hi guys,
I'm creating a MVC application and I ran into some problems. I've got a treestore as menu and a tabpanel with some items. When I click a specific menu item, let's call it mymenuitem1 or mymenuitem2, a new instance of mymenuitem class is created, but always a different set of data is loaded into this instance. The problem is, that after I click mymenuitem1 the data is loaded for corporation1, when I click mymenuitem2 the data is loaded for corporation2, but when I try just to change to mymenuitem1 from mymenuitem2, there still is data for corporation2

My mymenuitem class definition:

Ext.define('Fleximanager.view.pages.corpmain', {
extend: 'Ext.panel.Panel',
xtype: 'corpmaintab',

closable: true,
layout: 'vbox',

initComponent: function() {
this.items = [{
xtype: 'dataview',
flex: 5,
store: Ext.getStore('corpmain').load({
hostname: sessionStorage.hostname,
auth: sessionStorage.authSessionId,
corp: sessionStorage.activeCorp
itemTpl: new Ext.XTemplate(
'<tpl for="(branches)">',
'<table id="tfhover" id="home_table" class="tftable" style="margin-bottom: 10px;">',
'<caption class="x-panel-header-default">{branch_name}</caption>',
'<tr><td colspan="2">Expenses:<br>{strediskonakladyCelk}</td><td colspan="2">Profit:<br>{strediskoziskCelk}({strediskomarzaCelk})</td><td colspan="2">Revenues:<br>{strediskoprijmyCelk}</td></tr>',
'<tr><td colspan="2">Not paid expenses:<br>{strediskoneuhrPrijCelk}</td><td colspan="2">VAT: <br>{streddphCelk}</td><td colspan="2">Not paid revenues:<br>{strediskoneuhrVydCelk}</td></tr>',
this.renderTo = Ext.getBody();

And how do I select and add tabs from menu:

setMenuItem: function(record){
var dbName = record.get('dbName');
var classname, controller;
classname = 'Fleximanager.view.pages.' + Ext.String.createVarName(dbName);
controller = this.getController(Ext.String.createVarName(dbName));
} else {
classname = 'Fleximanager.view.pages.corpmain';
controller = this.getController('corpmain');
var tabPanel = Ext.getCmp('flexitabs');
var tabId = record.parentNode.get('text') + '/' + dbName + 'tab'
var tabIndex = tabPanel.items.findIndex('id', tabId)

if(tabIndex != -1){
} else {
if(record.isLeaf() && record.parentNode.get('text') != 'Root'){
sessionStorage.activeCorp = record.parentNode.get('dbName')
tabPanel.add(Ext.create(classname, {
title: record.parentNode.get('text') + ' - ' + record.get('text'),
id: tabId,
rootId: record.parentNode.get('dbName'),
className: classname
} else {
sessionStorage.activeCorp = record.get('dbName')
tabPanel.add(Ext.create(classname, {
title: record.get('text'),
id: tabId,
rootId: record.get('dbName'),
className: classname

Could anyone please help me?
Any answer appreciated.

30 Nov 2013, 11:33 AM
I advise against dynamically created components - such approach puts too much of load on a browser.
Why just don't use a floating treepanel with only one column?

About switching: you always create a new tab. If data for corp1 and corp2 has same structure I would better drop tabpanel in favor for a form / component with custom template. Then on menu item click, I can just bind a different record to the form / component.

Some time earlier I've created a fiddle, that showed an example of 'tabs' without actual tabpanel. If you are absolutely required to show recent 'opened' items, you can try same approach.