1. #1
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    10
    Vote Rating
    0
    gentstr is on a distinguished road

      0  

    Default Update existing tab?

    Update existing tab?


    I have a navigation tree that displays views in a tab panel once a node is clicked. I can create new tabs and add the view just fine, just can't seem to update an existing tab. The goal is to update the currently selected tab by default.

    Creating a new tab works just fine (not a full example, just relevant pieces):

    Code:
    // From tree view
    this.treeStore = Ext.create('Ext.data.TreeStore', {
        root: {
            expanded: true,
            text:     "",
            user:     "",
            status:   "",
            children: [
                {
                    text:      'Users',
                    leaf:      true,
                    view:      'usergrid',
                    viewTitle: 'User Config'
                }
            ]
        }
    });
    
    // From tree controller
    onSelectNode: function(view, record) {
        var viewport  = view.up('viewport'),
            tabpanel  = viewport.down('tabpanel'),
            view      = record.raw.view,           // Widget alias
            viewTitle = record.raw.viewTitle;
        
        var newTab = tabpanel.add({
            title:       viewTitle,
            iconCls:     'icon-tabs',
            closable:    true,
            bodyPadding: 5,
            autoScroll:  true,
            layout:      'fit',
            xtype:       view
        });
        
        newTab.show();
    }

    Can't update the current tab. Either nothing is displayed, or the actual code of the component is displayed, not the panel. All 4 options are commented out. Trying each one fails.

    Code:
    onSelectNode: function(view, record) {
        var viewport  = view.up('viewport'),
            tabpanel  = viewport.down('tabpanel'),
            view      = record.raw.view,           // Widget alias
            viewTitle = record.raw.viewTitle;
        
        // 1. Displays code in the grid panel
        //tabpanel.getActiveTab().update(Ext.widget(view));
        
        // 2. Displays code in the grid panel
        //var newView = Ext.create('APP.view.user.Grid', {});
        //tabpanel.getActiveTab().update(newView);
        
        // 3. Displays code in the grid panel
        //var newView = new APP.view.user.Grid();
        //tabpanel.getActiveTab().update(newView);
        
        // 4. Lazy doesn't work
        //tabpanel.getActiveTab().update({xtype: view});
    }
    Can someone help explain why I'm not able to update the current tab?

    Running 4.0.1.
    Last edited by gentstr; 19 May 2011 at 8:25 AM. Reason: More detail

  2. #2
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,350
    Vote Rating
    134
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    This should work:

    Code:
        var tab = tabpanel.getActiveTab();
        tab.removeAll();
        tab.add({
            xtype: 'dataview',
            ...
        });
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  3. #3
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    10
    Vote Rating
    0
    gentstr is on a distinguished road

      0  

    Default


    Your example works fine. I had to set the title separately and make sure to preventHeader, or I'd have additional, unwanted nesting.

    Code:
    var currentTab = tabpanel.getActiveTab();
    currentTab.removeAll();
    currentTab.setTitle(viewTitle);
    currentTab.add({
        preventHeader: true,
        closable:      true,
        autoScroll:    true,
        layout:        'fit',
        xtype:         view
    });

Thread Participants: 1

Tags for this Thread