How to show a view on the top level

[linuxyf]

How to show a view on the top level??

[mitchellsimoens]

What do you mean?

[linuxyf]

i refer to kiva example (detail.js), show several sub views from main view by animation effect.

sub view1

Ext.define('ShopSystem.view.view1', {
    extend: 'Ext.Container',
    xtype: 'zansetting',
    id:		'zansetting',
	
    requires: [
        'ShopSystem.view.list01'
    ],


    config: {
        modal: true,
        centered : true,
        hideOnMaskTap : false,
		padding: 0,
		cls: 'ZanCls',
        ui: 'zansetting',


        // we always want the sheet to be 400px wide and to be as tall as the device allows
        width: 400,
        height: 600,
        top: 100,
        left:100,
        
        //kanrival: null,


        layout: {
            type: 'vbox',
            align: 'stretch'
        },


        items: [{
            xtype:	'list01'
        }]
    },


    animationDuration: 500,


    show: function(animation) {
        this.callParent();


        Ext.Animator.run([{
            element  : this.element,
            xclass   : 'Ext.fx.animation.SlideIn',
            direction: Ext.os.deviceType == "Phone" ? "up" : "left",
            duration : this.animationDuration
        }, 
        {
            element : 'ext-mask-1',
            xclass  : 'Ext.fx.animation.FadeIn',
            duration: this.animationDuration
        }
        ]);
    },


    hide: function(animation) {
        var me = this,
            mask = Ext.getCmp('ext-mask-1');


        //we fire this event so the controller can deselect all items immediately.
        this.fireEvent('hideanimationstart1', this);


        //show the mask element so we can animation it out (it is already shown at this point)
        mask.show();


        Ext.Animator.run([{
            element  : me.element,
            xclass   : 'Ext.fx.animation.SlideOut',
            duration : this.animationDuration,
            preserveEndState: false,
            direction: Ext.os.deviceType == "Phone" ? "down" : "right",
            onEnd: function() {
                me.setHidden(true);
                mask.setHidden(true);
            }
        }, {
            element : 'ext-mask-1',
            xclass  : 'Ext.fx.animation.FadeOut',
            duration: this.animationDuration
        }]);
    },


    initialize: function() {
        this.on({
            scope: this,
            hiddenchange: this.onHiddenChange
        });
    },


    onHiddenChange: function(me, hidden) {
        if (!hidden) {


        }
    },
});

sub view2

Ext.define('ShopSystem.view.view2', {
......same as sub view1
        items: [{
            xtype:	'list02'
        }]
    },
......same as sub view1

the sub view1 and sub view2 can be called from main view. the sub view2 also can be called from sub view 1

after the main view is started, if i show sub view1 firstly, then i can show sub view2 from sub view1 or main view normally.

but if i show sub view2 from main view firstly, and hide the sub view 2. then i show sub view1 from main view and show sub view2 from sub view1, i found the sub view2 is showed under the sub view1. i want the view showed recently always be on the top level, but right now sub view2 is covered by sub view1.