1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    1
    Vote Rating
    0
    slyrp is on a distinguished road

      0  

    Question Unanswered: How do I close a modal window, from within itself?

    Unanswered: How do I close a modal window, from within itself?


    Hey Everyone

    I want to close a modal window when the user clicks on the window itself (used for a full screen image zoom). i.e. I want the window to behave like it normally does when the user clicks on the grayed out area. I setup a click handler, which manages to hide the element, but doesn't unmask the original window. Here's a simple code sample that show's you my issue:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="css-debug/sencha-touch.css" />
        <script type="text/javascript" src="lib/sencha-touch-debug-w-comments.js"></script>
    </head>
    <body>
    </body>
    <script>
        ImageZoom = Ext.extend(Ext.Panel, {
            floating: true,
            modal: true,
            centered: true,
            height: Ext.Element.getViewportHeight() * .95,
            width: Ext.Element.getViewportWidth() * .95,
            scroll: 'none',
    
    
            initComponent: function() {
                ImageZoom.superclass.initComponent.call(this);
                this.addListener({
                    el: {
                        tap: this.closeWindow
                    }
                });
            },
            closeWindow: function() {
                this.hide();
            },
            html: 'Hello'
        });
    
    
        new Ext.Application({
            launch: function() {
                new Ext.Panel({
                    fullscreen: true,
                    html: 'Hello World!',
                    listeners: {
                        body: {
                            tap: function(a,b,c) {
                                x = new ImageZoom("test");
                                x.show();
                            }
                        }
                    }
    
    
                });
            }
        });
    </script>
    </html>
    Any ideas? I tried calling this.parent.unmask(), but I think I might not be in the object hierarchy (but rather the dom)?

    Shaun

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


    You have a scoping issue. The scope of the el's tap event is the element but you need to execute hide() on the component, not the element:

    Code:
    ImageZoom = Ext.extend(Ext.Panel, {
        floating: true,
        modal: true,
        centered: true,
        height: Ext.Element.getViewportHeight() * .95,
        width: Ext.Element.getViewportWidth() * .95,
        scroll: 'none',
    
    
        initComponent: function() {
            ImageZoom.superclass.initComponent.call(this);
            this.addListener({
                el: {
                    scope: this,
                    tap: this.closeWindow
                }
            });
        },
        closeWindow: function() {
            this.hide();
        },
        html: 'Hello'
    });
    
    
    new Ext.Application({
        launch: function() {
            new Ext.Panel({
                fullscreen: true,
                html: 'Hello World!',
                listeners: {
                    body: {
                        tap: function(a,b,c) {
                            x = new ImageZoom("test");
                            x.show();
                        }
                    }
                }
    
    
            });
        }
    });
    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.

Thread Participants: 1

Tags for this Thread