1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    20
    Vote Rating
    0
    bassajen is on a distinguished road

      0  

    Default simple overlay source code in designer 2 beta

    simple overlay source code in designer 2 beta


    hello, i'm pretty new to sencha and i am trying to add some simple overlay functionalities to a button using sencha designer.

    i've created a button into a toolbar and added the tap event.
    defined a OnLogoutTap function in the component inspector and added this code (copied from sencha touch kitchensink)

    if (!this.popup) {


    this.popup = new Ext.Panel ({
    floating: true,
    modal: true,
    centered: true,
    width: 300,
    height: 200,
    styleHtmlContent: true,
    scroll: 'vertical',
    html: '<p> this is a modal </p>',
    dockedItems: [{
    dock: 'top',
    xtype: 'toolbar',
    title: 'overlay title'
    }]
    });
    }
    this.popup.show();



    but when i click nothing seems to be happening.

    any advice pls'
    thank you

    Marco

  2. #2
    Sencha - Architect Dev Team jjohnston's Avatar
    Join Date
    Sep 2010
    Posts
    543
    Vote Rating
    19
    jjohnston will become famous soon enough jjohnston will become famous soon enough

      0  

    Default


    Hello, Marco.

    You don't need to create a function yourself; the fact that you've created an event binding will automatically create a handler function. You can edit the contents of that handler function by selecting the event binding in the inspector and switching to code view.

    I'd also suggest that you might want to create the overlay as a top-level class using Designer rather than as a bunch of inline code; that will generate a proper class for the overlay and allow you to see it visually within Designer. Your button handler code can then just refer to the overlay class by the xtype (userAlias) you assign to it.

    I'm attaching a simple project that will show you what I mean. I hope it is helpful.
    Attached Files
    Jason Johnston
    @lojjic
    Sencha Architect Development Team

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    20
    Vote Rating
    0
    bassajen is on a distinguished road

      0  

    Thumbs up


    great example and great tool this designer, it made it extremely simple!

  4. #4
    Sencha Premium Member
    Join Date
    Mar 2008
    Posts
    92
    Vote Rating
    1
    kveeiv is on a distinguished road

      0  

    Default


    Quote Originally Posted by jjohnston View Post
    I'm attaching a simple project that will show you what I mean. I hope it is helpful.
    Thank you very much for posting a simple project. It gives good insight in to the current 'recommended' patterns from the developers, and I like to use things as close to the letter as intended in order to stay as future-proof as possible. If this is the recommended way to structure even simple overlays, at some point in the future we will definitely need some sort of organizer/folder/searching for the views (and probably other class types). Otherwise for larger applications that is going to be a nightmare of a list to navigate and maintain.

  5. #5
    Sencha - Architect Dev Team jjohnston's Avatar
    Join Date
    Sep 2010
    Posts
    543
    Vote Rating
    19
    jjohnston will become famous soon enough jjohnston will become famous soon enough

      0  

    Default


    Thanks for the input. We agree, the inspector tree can get difficult to navigate when your project gets above a certain size, and we're currently investigating ways to make that better.
    Jason Johnston
    @lojjic
    Sencha Architect Development Team

  6. #6
    Sencha User
    Join Date
    Apr 2012
    Posts
    25
    Vote Rating
    0
    sapkalparag is on a distinguished road

      0  

    Default Overlay Problem

    Overlay Problem


    Hi jjohnston

    I am trying the same functionality as given by you in the example.
    I am able to do it by adding the function as a listener in the view file where i have specified the button.
    My doubt is how can we do the same thing via a controller.
    I was able to show a pop up by 'tap' event on the button. i have referenced the button and added the code for showing pop up in the controller only. Now i want to show a Overlay. Problem is that i cant reference the panel, named OverlayPanel, in the controller.
    I have tried everything like specifying the userAlias, id, itemId and trying to get hold of my panel in controller. How can i do it?
    Once i get the OverlayPanel in the controller i would simply do : OverlayPanel.showBy(button);
    where am i going wrong?
    thanks

  7. #7
    Sencha User
    Join Date
    Apr 2012
    Location
    Virginia
    Posts
    31
    Vote Rating
    0
    sbruck is on a distinguished road

      0  

    Default example not working in Architect 2 ??

    example not working in Architect 2 ??


    I loaded the example provided in the zip file. Architect 2 informed me that the app was developed in a previous version and offered to update it. I accepted.

    I can run app in chrome, and the main screen works, but clicking on login, nothing happens.

    Thanks!