1

の上に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

あなたの質問から私が理解することは簡単です。画像のタップ時にポップアップで特定のボタンを表示したい。そのため、オーバーレイを使用して、その中にボタンを配置します。

デモを使用した実用的なフィドルはこちらです。このポップアップには、何でも表示できます。メソッド.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 に答える