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
    Location
    Kansas
    Posts
    1,512
    Vote Rating
    176
    dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of

      0  

    Default


    This should work:

    Code:
        var tab = tabpanel.getActiveTab();
        tab.removeAll();
        tab.add({
            xtype: 'dataview',
            ...
        });
    Don Griffin
    Engineering Manager - Frameworks (Ext JS / Sencha Touch)

    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