simple overlay source code in designer 2 beta

[bassajen]

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

[jjohnston]

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.

[bassajen]

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

[kveeiv]

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.

[jjohnston]

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.

[sapkalparag]

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

[sbruck]

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!