Layer button xtypes on top of img xtypes in Sencha Touch 2

Question

I'm trying to put 3 buttons on top of an xtype:'img', but I'm getting nowhere and can't find much online about it.

How does this work?

EDIT:

i have an image and when you tap it i want it to display the same image but now there are 3 options you can choose from view download share i want the buttons to look like they pop up over the image

Ext.define('Crystal.view.apphb',{
extend: 'Ext.Panel',
    xtype:'apphb',
    id:'panel',
requires: [

   'Ext.TitleBar',

],
 config:{
 layout: {
    type: 'card',
    animation: {
        type: 'fade'},
 },

items:[{

    xtype:'img',
 src:'resources/img/apphb.png',

listeners: {
            tap: function() {
                Ext.getCmp('panel').setActiveItem(1);
            },
            },

},

{





    xtype:'img',
 src:'resources/img/1.png',

 listeners: {
  tap: function() {
                Ext.getCmp('panel').setActiveItem(-1);
                }
                },






    }
]

}

});

so what exactly are you trying to do? I don't think you can do that from my understanding... I could be wrong. More code would probably be helpful — cclerv, Mar 16 '13 at 01:56
basically I want 3 buttons to show or float on top of an image almost like a xtype messagebox does except with out the black background — Jayrok94, Mar 16 '13 at 02:00
yeah but I don't think you can place button on top of `xtype:img`. Maybe if you have some more code I could see what you are trying to accomplish. — cclerv, Mar 16 '13 at 02:12

score 2 · Accepted Answer · answered Mar 16 '13 at 03:32

What I understand from your question is simple. You want to show certain buttons in a pop up on tap of image. So you use overlays and put buttons inside it.

A working fiddle with demo is here. You can display anything in you want in this pop up. The method .showBy() let you place pop up relative to certain element passed as parameter. Here's the code,

launch: function() {
        Ext.create('Ext.Panel', {
            fullscreen: true,
            items:[
                {
                    xtype:'image',
                    src: 'http://www.sencha.com/assets/images/sencha-avatar-64x64.png',
                    height: 64,
                    width: 64,
                    listeners:{
                        tap:function( img,e,opts ){
                           var overlay = Ext.Viewport.add({
                            xtype: 'panel',
                            left: 0,
                            top: 0,                       
                            modal: true,
                            hideOnMaskTap: true,
                            hidden: true,
                            width:160,
                            height:90,                          
                               items:[
                                   {
                                       xtype:'button',
                                       text:'Download'
                                   }
                               ],
                            styleHtmlContent: true,
                            scrollable: true
                        });             
                    overlay.showBy(img);
                       }
                    }
                }
                ]
        });
    }

the way SO works, if anyone give downvote it's his responsibility to give reason behind that. that will definitely point out mistakes answerer has done. — SachinGutte, Mar 16 '13 at 04:59
What if I want to download/save the image when I click the Download button? Can I add this functionality if yes how ? Please refer my question [link](http://stackoverflow.com/questions/15756690/how-save-image-to-phone-memory-say-sd-card-or-local-hard-drive-when-a-image-tap) ... Thanks — Sukane, Apr 02 '13 at 09:36

score 0 · Answer 2 · answered Mar 17 '13 at 10:25

what about using img as the background for the container?

    xtype: 'container',
                style: 'background: url(http://wallpapers.free-review.net/wallpapers/36/New_Batman_movie.jpg) no-repeat;',
                layout: {
                    align: 'stretch',
                    type: 'vbox'
                },
                items: [
                    {
                        xtype: 'container',
                        flex: 1
                    },
                    {
                        xtype: 'container',
                        height: 100,
                        defaults: {
                            margin: 5,
                            height: 80,
                            width: 100
                        },
                        items: [
                            {
                                xtype: 'button',
                                text: 'Like'
                            },
                            {
                                xtype: 'button',
                                text: 'Tweet'
                            }
                        ]
                    }
                ]
            }

Layer button xtypes on top of img xtypes in Sencha Touch 2

2 Answers2