CODEWITHSUNDEEP
javascriptsencha-touchsencha-touch-2
pepe
pepe

Reputation: 9919

How to create a 'Close' button to hide the current view in Sencha T2?

Starting off with my Main view, it loads another view with xytpe 'homepanel'.

Ext.define('MyApp.view.MainView', {
    extend: 'Ext.TabPanel',
    alias: 'widget.main',
    config: {
        tabBarPosition: 'bottom',

        items: [
            {
                xtype: 'homepanel', // loads view with xytpe 'homepanel'
            }
        ]
    }
});

from 'homepanel' we can go to the Youtube view which has a Close button in the top left

Ext.define('MyApp.view.YoutubeView', {
    extend: 'Ext.navigation.View',
    xtype: 'youtube',
    // id:    'youtube',
    config: {
        navigationBar: {
            items: [
                {
                    xtype:    'button',
                    iconMask: true,
                    text:     'Close',
                    align:    'left',
                    action:   'closeButton'
                }
            ]
        },
    }
});

When clicking the Close button, I'd like to go back to the Main view, if possible reloading it in case new posts have been placed.

Unfotunately this controlller code doesn't work as it throws a Object ext-viewport has no method 'hide' error.

Ext.define('MyApp.controller.PostStuffController', {
    extend: 'Ext.app.Controller',
    requires: [
        'Ext.navigation.View'
    ],
    config: {
        control: {
            'button[action=closeButton]': {
                tap: 'tapClose'
            }
        }
    },
    tapClose: function () {
        Ext.Viewport.getId().hide();
    }
});

Any suggestion on how to close the current view and load Main?

Upvotes: 0

Views: 1050

Answers (3)

pepe
pepe

Reputation: 9919

This did the trick:

tapClose: function (cmp) {
    Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
}

Upvotes: 0

Vikal Sharma
Vikal Sharma

Reputation: 555


May be this can help you.

Ext.define('MyApp.controller.PostStuffController', {
extend: 'Ext.app.Controller',
requires: [
    'Ext.navigation.View'
],
config: {
    control: {
        'button[action=closeButton]': {
            tap: 'tapClose'
        }
    }
},


tapClose: function (button, e, options) {
   button.up('navigationview').push({
   xtype: 'main', // view which you want to push
 });
}

});

Upvotes: 0

Dave Barker
Dave Barker

Reputation: 6447

There's a few problems.

  1. YoutubeView extends a navigation view. Normally you'd have a main view which extends a navigation view and then push and pop views from this main view.

  2. Don't use id's. This is the cause of the taps not firing the second time.

Upvotes: 1

Related Questions