1

我正在尝试在 3 上放置 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);
                }
                },






    }
]

}

});

4

2 回答 2

2

我从你的问题中理解的很简单。您想在点击图像时在弹出窗口中显示某些按钮。因此，您使用叠加层并在其中放置按钮。

演示的工作小提琴是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);
                       }
                    }
                }
                ]
        });
    }
于 2013-03-16T03:32:26.887 回答
0

使用 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'
                            }
                        ]
                    }
                ]
            }
于 2013-03-17T10:25:21.367 回答