PDA

View Full Version : Placing buttons over an Image in Carousel



coolsegi
11 Feb 2011, 5:15 AM
I need to place buttons over the different parts of an underlying image. I have created a new component (which is extending panel) and added image and overlay buttons into that. Then I am adding this component as carousel item. I have following queries:
1. Which layout should I apply to the custom component sothat overlay buttons are placed on the position specified by setPosition method and sized using setSize method? Size and x,y will come from the XML.
What I tried is as follows:
Currently I am using 'fit' layout for the custom component.
code for adding custom component to the carousel

setPages:function()
{
var iTotPages = 4;// to be fetch from the Model.
for(i=0; i<iTotPages; i++)
{
this.arrPageComponents.push(new EbookTouch.pageComponent(
{
id:(i+1),
pageIndex:i,
layout:'fit'
}
))
}
this.objPageComp = new Ext.Carousel
({
defaults: {
cls: 'card'
},
items: this.arrPageComponents,
listeners: {
cardswitch: {
fn: this.switchCard,
scope: this,
single:true
}
}
});
}
code for adding image in the custom component:


this.imagePanel = new Ext.Panel({
fullscreen: true,
html: '<img id=\'mypagepanelimg\' src=\'pages\\images\\page'+(pageIndex+1)+'.jpg\'>'
})
this.insert(0,this.imagePanel);

On the activation of a card I am adding buttons which are again custom component extending Button class


setHotspots: function()
{
this.addListener('afterlayout', this.onLayout, this,{single:true});
this.arrHotspotComponents = new Array();
var arrHotspots = this.objModel.getHotspots();
console.log("setHotspots==="+arrHotspots.length);
for(var i=0; i<arrHotspots.length; i++)
{
var objHotspotModel = arrHotspots[i]
var hsID= "Hotspot_"+i
var hotspot = new EbookTouch.HotspotComp(
{
id:hsID,
objModel:objHotspotModel,
ui:'small'
});
hotspot.x = 10;// for testing
hotspot.y = 100;//for testing
this.insert((i+1),hotspot);
this.arrHotspotComponents.push(hotspot);
}
this.doLayout();
}


Issues faced:
1. I am able to set the x,y position but not able to set the size of the button currently width is covering the entire screen width.
2. I have not provided any height and width to the image hence it is appearing full scale on the PC. Which is OK because i need to position buttons based on the full size. But when i run it on ipad image is automatically scaled to fit in the screen area. Due to that overlay buttons are not positioned properly.
Please help