Кнопка слоя xtypes поверх img xtypes в Sencha Touch 2

Question

Я пытаюсь наложить 3 кнопки на верхнюю часть xtype:'img', но я никуда не могу и не могу найти много информации об этом.

Как это работает?

EDIT:

У меня есть изображение, и когда вы постучите я хочу его показать то же изображение, но теперь есть 3 варианта, вы можете выбрать из поля зрения загрузки доли я хочу кнопки, чтобы посмотреть, как они выскакивают над изображением

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); 
       } 
       }, 






    } 
] 

}

});

Answer 1

То, что я понимаю из вашего вопроса, прост. Вы хотите показать определенные кнопки во всплывающем окне при нажатии на изображение. Таким образом, вы используете overlays и вставляете в него кнопки.

Рабочая скрипка с демонстрацией here. Вы можете отображать все, что захотите в этом всплывающем окне. Метод .showBy() позволяет вам выскакивать по определенному элементу, переданному в качестве параметра. Вот код,

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); 
         } 
        } 
       } 
       ] 
     }); 
    } 

Answer 2

Что об использовании img в качестве фона для контейнера?

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' 
          } 
         ] 
        } 
       ] 
      }