PDA

View Full Version : How to make custom popup dialog box with image?



0steve
29 Aug 2012, 8:00 AM
Hi,

Can someone point to me the right direction in making a custom popup dialog box with an image inside in Sencha Architect 2.x with Sencha Touch 2.x?

I am not sure on how to go about this.

All I know is


//It would be nice if I can put an html image tag in the popup and display the image.
//This does not work, it only display the code as a string in the popup alert box.
Ext.Msg.alert('Status', '<img border="0" src="image.jpg" alt="imageInPopup" width="300" height="200" />');


Thank you in Advance!

aconran
29 Aug 2012, 8:34 AM
Do you want to show like a small icon indicating what the alert is?

We provide a few INFO, WARNING, QUESTION, ERROR. Take a look at icon underneath of the show method docs:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.MessageBox-method-show

You can also pass in a css class with a relevant background-image.

0steve
29 Aug 2012, 9:01 AM
Hi,

I want to show large size photo on the popup. Like a photo gallery, when a user click on a photo, it would popup a larger version of the photo.

I am not sure on how to go about showing an large size image on a popup.

Thank you in Advance!

aconran
29 Aug 2012, 9:03 AM
You're probably looking for an Ext.Window with an html configuration (or a single Ext.Img component)

0steve
29 Aug 2012, 9:24 AM
Hi,

Will Ext.Window be compatible with Sencha Touch 2.x? Seems like Ext.Window is only for Ext JS 4.0. Is there a similar feature to Ext.Window in Sencha Touch 2.x?

Thank you in Advance!

aconran
29 Aug 2012, 9:29 AM
A floating panel will probably do what you want; take a look at the overlays example.
http://docs.sencha.com/touch/2-0/#!/example/overlays

0steve
29 Aug 2012, 4:59 PM
Hi,

Seems like the example's source code is in a minified version.

I was wondering what type of component creates the overlay when the button is clicked on. Panel? Sheets?

Thank you in Advance!

aconran
29 Aug 2012, 6:59 PM
Hi,

Seems like the example's source code is in a minified version.

I was wondering what type of component creates the overlay when the button is clicked on. Panel? Sheets?

Thank you in Advance!

Yes it's a panel. I'd suggest downloading the standard Sencha Touch SDK and taking a look at examples/overlays/app.js

0steve
30 Aug 2012, 7:23 AM
Thanks alot!

That really helped!