How to close a tab or refresh

[blade226]

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]

Take a look at the deferredRender config for Ext.tab.Panel.

[blade226]

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]

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]

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]

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]

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]

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