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.
Code:
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.
Code:
   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.