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

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

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

РЕДАКТИРОВАТЬ:

у меня есть изображение, и когда вы нажимаете на него, я хочу, чтобы оно отображало одно и то же изображение, но теперь есть 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);
                }
                },






    }
]

}

});


extjs sencha-touch-2 sencha-touch-2.1
person Jayrok94    schedule 16.03.2013    source источник
comment
так что именно вы пытаетесь сделать? Я не думаю, что вы можете сделать это, насколько я понимаю... Я могу ошибаться. Больше кода, вероятно, было бы полезно   -  person cclerv    schedule 16.03.2013
comment
в основном я хочу, чтобы 3 кнопки отображались или плавали поверх изображения, почти как окно сообщений xtype, за исключением черного фона.   -  person Jayrok94    schedule 16.03.2013
comment
это полезнее?   -  person Jayrok94    schedule 16.03.2013
comment
да, но я не думаю, что вы можете разместить кнопку поверх xtype:img. Может быть, если у вас есть еще код, я мог бы увидеть, чего вы пытаетесь достичь.   -  person cclerv    schedule 16.03.2013
comment
хорошо, это обновлено с кодом   -  person Jayrok94    schedule 16.03.2013

Ответы (2)


arrow_upward
2
arrow_downward

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

Рабочая скрипка с демонстрацией находится здесь. Вы можете отобразить все, что хотите, в этом всплывающем окне. Метод .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);
                       }
                    }
                }
                ]
        });
    }
person SachinGutte    schedule 16.03.2013
comment
как работает SO, если кто-то даст отрицательный голос, он обязан объяснить причину этого. это определенно укажет на ошибки, которые сделал ответчик. - person SachinGutte; 16.03.2013
comment
Что делать, если я хочу загрузить/сохранить изображение, когда я нажимаю кнопку «Загрузить»? Могу ли я добавить эту функцию, если да, то как? Пожалуйста, обратитесь к моему вопросу ссылка ... Спасибо - person Sukane; 02.04.2013

arrow_upward
0
arrow_downward

как насчет использования 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'
                            }
                        ]
                    }
                ]
            }
person Dawesi    schedule 17.03.2013