PDA

View Full Version : Create a resizable draggable panel



thosimo
4 May 2010, 4:41 AM
Hello,

I try to create a resizable and draggable panel. We neet that, to mark a positionarea in a image.

On resize the panel campaignpreviewpanel2 does not change his body.



var campaignpreviewpanel = new Ext.Panel( {
autoWidth: true,
autoHeight: true,
items : [{
xtype: 'box',
autoEl: {
tag: 'div',
html: '<img src="./affiliateuploads/_preview.jpg" alt="no image">'
}
}]
});

var campaignpreviewpanel2 = new Ext.Panel( {
// layout: 'absolute',
id: 'bonuscodepanel',
frame: true,
border: false,
bodyStyle: "background-color: #ffff00;",
draggable: {
insertProxy: false,
onDrag : function(e){
var pel = this.proxy.getEl();
this.x = pel.getX() - campaignpreviewpanel.getPosition()[0];
this.y = pel.getY() - campaignpreviewpanel.getPosition()[1];
},
endDrag : function(e){
this.panel.setPosition( this.x, this.y);
},
},
items : [{
id: 'blabla',
xtype: 'box',
autoEl: {
tag: 'div',
html: '<div align="center" width="center">'
+ 'Positionier mich,<br>vergrößer mich<br>oder verkleiner mich!'
+ '</div>'
}
}],
listeners: {
render: function() {
var resizer = new Ext.Resizable( this.getEl() , {
handles: 'all',
pinned: true,
dynamic: true,
listeners: {
resize: function(cmp){
alert( campaignpreviewpanel2.getWidth() + ' - ' + campaignpreviewpanel2.getHeight());
}
}
});
}
}
});


Ext.onReady(function(){

var test = new Ext.Window({
layout: 'absolute',
width: 620,
height: 450,
bodyStyle: "background-color: #cccccc",
items: [
campaignpreviewpanel,
campaignpreviewpanel2
]
});
test.show();
campaignpreviewpanel2.setHeight(100);
campaignpreviewpanel2.setWidth(100);
});
Thanks in advance.

Animal
4 May 2010, 4:45 AM
You mean an Ext.Window?

thosimo
4 May 2010, 7:57 PM
I need the functionality (http://dict.leo.org/ende?lp=ende&p=Ci4HO3kMAA&search=functionality&trestr=0x8001) of a window, that is right (http://dict.leo.org/ende?lp=ende&p=Ci4HO3kMAA&search=right&trestr=0x8002), but I can only drag an window in the titlebar, or is there an alternative (http://dict.leo.org/ende?lp=ende&p=Ci4HO3kMAA&search=alternative&trestr=0x8001)?.

I want to let the user mark an area in a picture.
campaignpreviewpanel is the pincture,
campaignpreviewpanel2 is the resizable, draggable panel to mark the area.
It worked fine, but the problem is, the body of campaignpreviewpanel2 don't fill out the whole Panel after resize.

Thanks in advance.

Animal
4 May 2010, 9:22 PM
You can add drag handles to a DD. You'll have to figure it out.

Sesshomurai
6 May 2010, 3:58 PM
Something similar I asked and got a good response from steffenk. Maybe you can use this technique.
http://www.extjs.com/forum/showthread.php?97546-Make-any-Panel-Resizable