Sencha Touch 2中位于img xtype顶部的图层按钮xtype
Sencha Touch 2中位于img xtype顶部的图层按钮xtype
提问于 2013-03-16 09:55:15
我试着把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);
}
},
}
]}
})；
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-03-16 11:32:27
我从你的问题中理解的很简单。您想要在轻拍图像时在弹出窗口中显示某些按钮。因此，您使用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);
}
}
}
]
});
}Stack Overflow用户
发布于 2013-03-17 18:25:21
如果使用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'
}
]
}
]
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15444725
复制相关文章
相似问题
腾讯云开发者
