PDA

View Full Version : Floating Panel Layout



hitman01
27 Oct 2010, 6:23 AM
I'm trying to create a floating modal panel which will have 4 large images inside it (in a box to create a single large image). The size of the panel should change dynamically based on the 4 images. Also, it could get much lager than screen size so I would like to enable scrolling and would like to scroll the content within the panel to the center of the panel.

Here is my code: Could you provide me with some feedback on how I can achieve what I'm trying to do.

Also, setWidth, setHeight doesnt seem to work at all.

var zoomPanel = new Ext.Panel({
floating: true,
scroll:'both',
centered: true,
width: 100,
height: 100,
style: "text-align: center;",
html: "<div id='zoomImage'> this is where I load the 4 image dynamically </div>",
modal: true,
layout: 'fit',

zoom: function(imageId, width, height) {
this.setHeight(width);
this.setWidth(height);
this.setCentered();
this.doLayout();

// Get source for Zoomed In image (Array)
var imageSrc = getImageByPageIndex(imageId, 'large');

zoomedImage = Ext.getDom('zoomImage');
zoomedImage.innerHTML = '';
zoomedImage.style.cssText = 'width:' + width + 'px; height: ' +height+ 'px;';

if(imageSrc.length > 1) {
// Create New Images
if(zoomedImage.childNodes.length == 0) {
for(i=0;i<4;i++){
newImage = new Image();
newImage.src = imageSrc[i];
newImage.id = 'imagePart-'+i;
newImage.style.cssText = 'clear:both; float:left;width:'+(width/2)+'px; height: '+(height/2)+'px;';
zoomedImage.appendChild(newImage);
}
}
// Update Existing Images
else {
for(i=0;i<4;i++) {
zoomedImage.childNodes[i].src = imageSrc[i];
zoomedImage.childNodes[i].cssText = 'float:left;clear:none; width:'+(width/2)+'px; height: '+(height/2)+'px;';
}
}

}

zoomPanel.show();
}

});