这样的Ext布局如何做出类似淘宝的图片放大镜效果？

Question

如图上，右边yellow区域是个Ext.panel，图片数据动态传递过来放在这个panel的html里。yellow左边的蓝色区域暂且也做个Ext.panel，且设置隐藏。现在我想做个图片放大镜效果，类似淘宝的那种图片放大镜。
我这样想的：鼠标移到yellow的图片区域，触发鼠标事件，使得左边蓝色区域显示出来，并且蓝色区域内显示放大的图片。不知道我这样想对不对??
请大家来和我一起想怎么做啊，，，或者给我点建议。

Answer 1

http://www.divcss5.com/fanli/278/

Answer 2

这个很多，我想在EXT里实现，就是上面我描述的那样，不知道如何搞？
如何把JQueryZoom用到EXT里呢？唉，纠结

Answer 3

你让Ext.panel 里的内容能执行脚本，然后给图片一个鼠标移上 和 移出 的事件，然后调用大图显示在蓝色的panel里就行了嘛

Answer 4

哦，已经实现了！
我最初是想先设置一个蓝色的panel用于显示放大镜的大图，设置隐藏。
鼠标移到黄色的原图上时，蓝色的panel显示出来。搜了一下网络，发现很多人做过这样的事情，干脆躲懒了，拉了一个感觉比较好的JS代码，该代码具有OO设计风范，很好理解。这里把代码贴给大家看看
<script type="text/javascript" src="js/qsoft.PopBigImage.v0.35.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var picRegion = '<img id="FullView" width="280" src ="image/win7.jpg" height="210" onmouseover="qsoft.PopBigImage.create(this,-561,0,1,1,true);" galleryimg="no"/>'
    this.panel = new Ext.Panel({
border : false,
frame : false,
width : 280,
height : 210,
html : picRegion,
listeners : {
//afterRender : this.initField.createDelegate(this)
}
});
var form = new Ext.form.FormPanel({
title:"selfish layout",
width:600,
autoHeight:true,
frame:true,
renderTo:"formPanel",
layout:"form",
labelWidth:65,
labelAlign:"right",
items:[{//line 1
layout:"column",
items:[{
layout:"form",
width:300,
height:215
},{
layout:"form",
items:[this.panel]
}]
},{//line 2
layout:"form",
items:[{
xtype:"htmleditor",
height:150
}]
}],
buttonAlign:"center",
buttons:[{
text:"submit"
},{
text:"reset"
}]
});
})
</script>qsoft.PopBigImage.v0.35.js这个JS很强大呀，感觉比JQueryZoom强大。因为JQueryZoom有个很大的BUG，每点击一个记录，内存增加5M，fuck!!!其他插件还没看，先用这个吧，反正挺好用的，哈哈哈哈