PDA

View Full Version : Button - over image



coolsegi
7 Feb 2011, 4:16 AM
I need to put a button over an Image so that it should like a hotspot. I am making this a button because bcoz then i'll use CSS to change the style of hotspot. I am adding this button in a custom component. This custom component is treated as an item of the carousel component. I am creating this button on the activate event of the custom component. I am able to see the button for the 1st time but whenever i resize the browser window or navigate through other pages, this button disappears.
Any support will be very helpful.
Below given is the code for the custom component which is ultimately added to the carousel.
EbookTouch.pageComponent = Ext.extend(Ext.Panel,
{
objModel:null,
pageIndex:0,
initComponent: function()
{
// Call parent (required)
EbookTouch.pageComponent.superclass.initComponent.apply(this, arguments);
// After parent code
this.setPageImage(this.pageIndex);
this.addListener('activate', this.onActivate, this);
},
setPageImage: function(pageIndex)
{
var pageImage = new Ext.Panel
({
html:'<img id=\'mypagepanelimg\' src=\'pages\\images\\page'+(pageIndex+1)+'.jpg\'>'
});

//
this.insert(0,pageImage);
},
onHotspot:function(objComp)
{
objComp.setText("clicked");
//console.log("click me=");
},
onRender: function()
{
EbookTouch.pageComponent.superclass.onRender.apply(this, arguments);
console.log('called when the page is rendered')
},
onActivate: function()
{

getEbookTouchController().getModel().loadPageModel(this.pageIndex);
getEbookTouchController().getModel().addListener('pageDataLoaded', this.onPageDataLoaded,this);
},
onPageDataLoaded : function(model) // this function is called when the data has been loaded
{

this.objModel = model;
this.setPageElements();
},
setPageElements: function()
{
this.setHotspots();
},
setHotspots: function()
{


var hospot = new Ext.Button(
{
id:"Hotspot",
handler:this.onHotspot,
scope:this,
text:"hotspot",

});
hospot.setText("changed");
this.insert(1, hospot);
this.doLayout();


},
clearListeners: function()
{
getEbookTouchController().getModel().removeListener('pageDataLoaded', this.onPageDataLoaded,this);
}
});

Please let me know if the code is unclear will share a different example in that case.