PDA

View Full Version : How to close a tab or refresh



blade226
23 Apr 2012, 4:03 AM
Hello,

i have a problem.
I have a tabpanel with 2 opened tabs. Both tabs works with other stores, but when i change something in the first tab, the second tab must be refreshed (when it is opened!). Close would also go

I tried it with:


if (typeof tabbenutzer !== 'undefined') {tabPanel.destroy(tabbenutzer);}

The second tab named as tabbenutzer.

It would be great if the update would work

friend
23 Apr 2012, 4:33 AM
Take a look at the deferredRender (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.tab.Panel-cfg-deferredRender) config for Ext.tab.Panel.

blade226
23 Apr 2012, 9:49 PM
If I understand correctly, then deferredRender ensures that the contet is available in an other tab.

But what's next?

Here my code for the different tabs:

First tab:

......
artikelGrid = Ext.create ("Ext.grid.Panel" , {

//width : 300,
//title : "Benutzerdaten",

store : store_benutzer,
autoScroll : true,

features: [{ftype:'grouping'}],
frame:true,
dockedItems: [{
xtype: 'toolbar',
items: [{
iconCls: 'icon-add',
text: 'Neu',
scope: this,
//handler: this.onAddClick
}, {
iconCls: 'icon-delete',
text: 'Löschen',
disabled: true,
itemId: 'delete',
scope: this,
//handler: this.onDeleteClick
}]
}],
columns:[
{header:"Benutzername",dataIndex:"user_name", flex:1},
{header:"Recht",dataIndex:"rechte", flex:1},
{header:"Erstellung",dataIndex:"datum", flex:1}
]
});

second tab:

.......
artikelGrid = Ext.create ("Ext.grid.Panel" , {

//width : 300,
//title : "Benutzerdaten",

store : store_benutzer3,
autoScroll : true,
selType: 'rowmodel',
features: [{ftype:'grouping'}],
frame:true,
columns:[
{header:"Benutzername",dataIndex:"user_name", flex:1},
{header:"Recht",dataIndex:"rechte", flex:1},
{header:"Erstellung",dataIndex:"datum", flex:1}
],

listeners: {
selectionchange: function(model,records){



var frage = Ext.MessageBox.show({
title:'Bestätigung',

//msg: action.result.message,
modal:true,
icon:Ext.Msg.QUESTION,
msg: "Soll der Benutzer wirklich gelöscht werden?",
buttons:Ext.Msg.YESNO,
buttonText: {yes : 'Ja'},
fn: function(btn){
if (btn == 'yes'){
Ext.Ajax.request({
url:"includes/benutzerdaten_loeschen.php",
params: records[0].data
});

store_benutzer3.remove(records);
Ext.MessageBox.close(frage);
if (typeof tabbenutzer !== 'undefined') {
console.log('Hier bin ich');tabPanel.destroy(tabbenutzer);}
//if (typeof tabbenutzer !== 'undefined') {tabbenutzer.getUpdater();}
}
}
})}
}
}

And Output:


.....
tab = Ext.create('Ext.panel.Panel', {
//html: nodeText + ' Content Here',
itemId: tabId,
title: nodeText,
closable:true,
deferredRender : false,
items: [artikelGrid]
});
tabPanel.add(tab);
}

// set the tab as active/on-top.
tabPanel.setActiveTab(tab);
}
},
store: treeStore,
width: 200
});

friend
24 Apr 2012, 3:49 AM
What do you want to happend next? Is it something along the lines of, "A user clicks a button in the first tab which should cause the grid's data store in the second tab to reload"?

blade226
24 Apr 2012, 3:57 AM
It is so that i want to delete a record in the second tab. Even in the database behind. In the other (first) tab the data row is still available.
When the action of the second tab provides succes:true then the first tab will be reloaded. Or closed in the worst case.

friend
24 Apr 2012, 5:14 AM
In the delete button handler code, all you need do is get a reference to the target grid and reload its data store. It can make things easier if you give the target grid an itemId attribute with a valid name, e.g. itemId: 'gridOnTab1'. You can then do something like this:



Ext.ComponentQuery.query('#gridOnTab1')[0].getStore().load();

blade226
24 Apr 2012, 9:35 PM
Nice it works, but now there is still a question: How can i find out, that the non active tab is opened. When it is closed the code want to load a store that doesn't exist.

blade226
26 Apr 2012, 12:04 AM
Now i tried another way, but same problems:

I search fpr the active tab:


var activeTab = tabPanel.getActiveTab();

It returns an object with itemid and even more

But now i want to reload the store in tab

Ext.ComponentQuery.query(itemId)[0].getStore().load();
I don't know, who to use the object as itemid

When i give him the static id

Ext.ComponentQuery.query('#tab_buebersicht')[0].getStore().load();
it works. But is the tab not openend, then the script stopps with an error.

How can i use the object or the first idea: Find out, witch store is in use and reload it