PDA

View Full Version : Ruler around the resizable image



benzo11
3 Apr 2014, 12:36 AM
Hello,
I am in doubts how to apply ruler on top and left side of image. I have image seted on panel(look code at autoEl definition). So the question is how to apply ruler based on sliders which zoom the image.

var tabs = new Ext.Panel({ title: '<?php echo $fileL ;?>',
region:'center',
autoScroll:true,
name:'panel1',
id:'panel1',
bodyCfg :{cls:'imgAreaBorder', style:{
'background-image':'url(Icons/schachbrettmuster.gif) !important'

}},
height:'100%',
width:'100%',
items:[{
autoEl:{ //TODO: handler za urejanej slike...
tag:'img',
id:'image',
name:'image',
frame:true,
autoHeight:true,
autoWidth:true,
src: '<?php echo $imgPath_server.$fileL;?>',
listeners: {
change:function(field,newval,oldval){
image.width= Ext.getCmp('zoomx').getValue();
}
}
}
}]
});

This code is from slider definition, which action is to change width of image and normaly height.

listeners: { change:function(field,newval,oldval){
image.width= Ext.getCmp('zoomx').getValue();
Ext.getCmp('widthField').setValue(image.width);
Ext.getCmp('heightField').setValue(image.height);
}
}

}
Bellow is image how I want to be. I would be glad if someone can give me some advice.
http://i58.tinypic.com/2meczt0.jpg