Results 1 to 8 of 8

Thread: How to close a tab or refresh

  1. #1
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Mlheim an der Ruhr, Germany
    Posts
    82
    Answers
    5

    Default How to close a tab or refresh

    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:

    Code:
    if (typeof tabbenutzer !== 'undefined') {tabPanel.destroy(tabbenutzer);}
    The second tab named as tabbenutzer.

    It would be great if the update would work

  2. #2
    Sencha User friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106

    Default

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

  3. #3
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Mlheim an der Ruhr, Germany
    Posts
    82
    Answers
    5

    Default

    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:
    Code:
    ......
    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:
    Code:
    .......
    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:

    Code:
    .....
              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
      });

  4. #4
    Sencha User friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106

    Default

    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"?

  5. #5
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Mlheim an der Ruhr, Germany
    Posts
    82
    Answers
    5

    Default

    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.

  6. #6
    Sencha User friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106

    Default

    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:

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

  7. #7
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Mlheim an der Ruhr, Germany
    Posts
    82
    Answers
    5

    Default

    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.

  8. #8
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Mlheim an der Ruhr, Germany
    Posts
    82
    Answers
    5

    Default

    Now i tried another way, but same problems:

    I search fpr the active tab:

    Code:
     var activeTab = tabPanel.getActiveTab();
    It returns an object with itemid and even more

    But now i want to reload the store in tab
    Code:
    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
    Code:
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •