Hybrid View

  1. #1
    Sencha User
    Join Date
    Oct 2010
    Posts
    80
    Vote Rating
    0
    linuxyf is on a distinguished road

      0  

    Default How to show a view on the top level

    How to show a view on the top level


    How to show a view on the top level??

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    What do you mean?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Oct 2010
    Posts
    80
    Vote Rating
    0
    linuxyf is on a distinguished road

      0  

    Default


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

    sub view1
    Code:
    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
    Code:
    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.

Thread Participants: 1