Results 1 to 4 of 4

Thread: Remove Persistant Tab Bar

  1. #1
    Sencha User
    Join Date
    Apr 2007
    Posts
    138
    Answers
    1

    Default Answered: Remove Persistant Tab Bar

    I'm working on a project where one view has a TabBar. When I switch over to another view, the TabBar disappears but the tabs themselves remain. I've tried several things to diagnose the problem, including:
    1. Hiding the TabBar once the view has switched.
    2. Destroying the old view once it is erased.
    3. Tinkering with the custom CSS to see if any of my rules are affecting the tabs.


    Nothing has worked so far. I know that #3 isn't the culprit since a vanilla load of the app on Sencha Fiddle renders the same problem. Has anyone else had this problem?

    Here are the styled screens:

    Screen Shot 2015-01-22 at 11.30.27 AM.jpg
    (You can see the TabBar at the base of this view)

    Screen Shot 2015-01-22 at 11.30.51 AM.jpg
    (The TabBar tabs remain)

    Here's a Fiddle (un-styled), if you need it to help diagnose (click on the Test, States and Capitals...item; then tap the 'Start Test' button to switch the view):

  2. Instead of trying to hide a new instance of mainPanel, you need to get a reference to the existing mainPanel view.

    Define a reference for your mainPanel instance in the controller's refs config.
    Code:
    Ext.define('testEnvironment2.controller.mainPanel', {
        extend: 'Ext.app.Controller',
    
    
        config: {
            refs: {
                mainPanel: 'mainPanel'
            },
            control: {
                // ...
            }
        },
        //...
    When you need to work with the existing mainPanel instance, use this.getMainPanel().
    Code:
        onBtnDeployTestTap: function(button, e, eOpts) {
            // Variables
            var deployTest = Ext.widget('deployTest'),
                testPanel = Ext.widget('testPanel'),
                mainPanel = this.getMainPanel();  // <-- Get reference to existing panel
    
    
            //...
    
    
            // Destroy the mainPanel
            mainPanel.getTabBar().hide();
            mainPanel.onAfter('erased', function() {
                this.destroy();
            });
    
    
            // Start the timer
        },
        //...
    Regards,
    Brian


  3. #2
    Sencha User
    Join Date
    May 2012
    Posts
    154
    Answers
    8

    Default

    funny :-)

    I think you could try to show your testView in another way, like this:

    // mainEl = main Container

    Ext.getCmp('mainView').removeAll();
    Ext.getCmp('mainView').insert(0,{xtype: 'testView',flex: 100});

    We did that in a project.

    Worked pretty nice.

    Ext.define('bla.view.viewPort',
    { extend: 'Ext.Container',
    config: {
    id: 'mainViewport',
    fullscreen: true,
    layout: 'hbox',
    items: [
    { xtype: 'mainview', id: 'mainview',
    width: '100%' }
    ],




    or sth like that. just to give you an example (not 100% working here, since i copy pasted and quickly changed some things), but you know what I mean probably.

  4. #3
    Sencha Premium User lumberjack's Avatar
    Join Date
    Nov 2014
    Location
    Kansas
    Posts
    781
    Answers
    102

    Default

    Instead of trying to hide a new instance of mainPanel, you need to get a reference to the existing mainPanel view.

    Define a reference for your mainPanel instance in the controller's refs config.
    Code:
    Ext.define('testEnvironment2.controller.mainPanel', {
        extend: 'Ext.app.Controller',
    
    
        config: {
            refs: {
                mainPanel: 'mainPanel'
            },
            control: {
                // ...
            }
        },
        //...
    When you need to work with the existing mainPanel instance, use this.getMainPanel().
    Code:
        onBtnDeployTestTap: function(button, e, eOpts) {
            // Variables
            var deployTest = Ext.widget('deployTest'),
                testPanel = Ext.widget('testPanel'),
                mainPanel = this.getMainPanel();  // <-- Get reference to existing panel
    
    
            //...
    
    
            // Destroy the mainPanel
            mainPanel.getTabBar().hide();
            mainPanel.onAfter('erased', function() {
                this.destroy();
            });
    
    
            // Start the timer
        },
        //...
    Regards,
    Brian


  5. #4
    Sencha User
    Join Date
    Apr 2007
    Posts
    138
    Answers
    1

    Default

    Worked perfectly. Thanks!

Posting Permissions

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