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

      0  

    Default about mask

    about mask


    i refer to the Kiva example, display a view by sliding in from right.

    now, when i click the outside the view, the hide() method is called, the view is closed.
    i want to click the custom quit button to close the view rather than closing the view by click the outside the view.

    that is, click the mask (outside the view), don't call the hide method to close the view . how to do??

    the code is as following:
    Code:
    Ext.define('ShopSystem.view.ZanSetting', {    extend: 'Ext.Container',
        xtype: 'zansetting',
        id:		'zansetting',
    	
        requires: [
            'ShopSystem.view.GroupList'
        ],
    
    
        config: {
            modal: true,
            centered : true,
            hideOnMaskTap : true,
    		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: 'grouplist' 
            }]
        },
    
    
        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) {
    
    
            }
        }
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Vote Rating
    856
    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


    To not allow hiding when tapping on the mask, set the hideOnMaskTap config to false. Now you can add a button that will hide it.
    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


    thank you very much!!!

Thread Participants: 1