PDA

View Full Version : problem with resizable Object in Panel



TAG
13 Aug 2009, 1:04 AM
Hello,
I create an application with 2 Panel, in the left Panel I insert a list of image Object, in the right Panel I have a work area. I create a code for D&D Object from the left Panel in the right Panel. When I Drag Odject in right Panel, I create new Object such as drag.
The code is:


var AreaCentrale = new Ext.TabPanel({
id: 'contenitoreMaster',
region:'center', deferredRender:true, enableTabScroll:true, autoScroll:true, activeTab:0, split: true,
items:[{
title: 'titolo',
html: '<div id="idGenericTitoloGriglia" class="griglia"></div>',
iconCls: 'nuova',
closable:false,
autoScroll: true,
id: 'Genericidtitolo',
listeners: {
render: function(){
var ddrowTarget = new Ext.dd.DropTarget(Ext.get('Genericidtitolo'), {
ddGroup: "mygroup",
notifyDrop : function(dd, e, data){
var selectedRecord = dd.dragData.selections[0];
var coords = e.getXY();
var appoggio=AreaCentrale.getItem('Genericidtitolo');
var pathImg=selectedRecord.get('symbol');
var idOggetto=selectedRecord.get('id')+'_'+Math.round(Math.random()*1000);
appoggio.add({html:'<img id="'+idOggetto+'" src="'+pathImg+'" height="100" width="100">'});
appoggio.doLayout();
}
}
)
}
}
}
]
})

this code function, creating a list of image in right Panel.
Now I want to make the Object "resizable" and "draggable".

I read the API documentation, for create an resizable Object the code is:


var resObject=new Ext.Resizable(idOggetto, {
wrap:true,
pinned:false,
width: 50,
height: 50,
maxHeight: 8000,
maxWidth:8000,
minWidth:10,
minHeight: 10,
handles: 'all',
draggable:true,
widthIncrement:5,
heightIncrement: 5
});


when I insert this second code in first code, I haven't a good result. The application don't work correctly.
I certainly make mistakes in creating the code.
The code merge is:


.....
var ddrowTarget = new Ext.dd.DropTarget(Ext.get('Genericidtitolo'), {
ddGroup: "mygroup",
notifyDrop : function(dd, e, data){
var selectedRecord = dd.dragData.selections[0];
var coords = e.getXY();
var appoggio=AreaCentrale.getItem('Genericidtitolo');
var pathImg=selectedRecord.get('symbol');
var idOggetto=selectedRecord.get('id')+'_'+Math.round(Math.random()*1000);
appoggio.add({html:'<img id="'+idOggetto+'" src="'+pathImg+'" height="100" width="100">'});
new Ext.Resizable(idOggetto, {
wrap:true,
pinned:false,
width: 50,
height: 50,
maxHeight: 8000,
maxWidth:8000,
minWidth:10,
minHeight: 10,
handles: 'all',
draggable:true,
widthIncrement:5,
heightIncrement: 5
});
appoggio.doLayout();
.....


Summing up what I want to create is a code that creates a run time of objects resizable and draggable by adding them to a left panel.
Thanks in advance for anybody tell me where I commit mistakes.
Sorry for my English.
I would also like to load an img to show the application running but I can not upload the picture you could show me how to do?

Animal
13 Aug 2009, 1:12 AM
If yuo are dragging "things" from one place to another, and there may then be multiple "things" on the "other" place, then you should use a DataView which renders data from Record objects according to a template.

The notifyDrop method would just add a new Record to the DataView.

A Resizable could then be created based upon the node associated with that new Records. A DataView allows you to find the HTML node associated with any Record in its Store.

TAG
13 Aug 2009, 1:18 AM
I read the Example in Api Documentation for Ext.DataView. I modified my code inserting in the right panel the DataView and the event in its creation of resizable?

TAG
13 Aug 2009, 1:19 AM
you can not do it with the panels?

Animal
13 Aug 2009, 1:19 AM
What?

TAG
13 Aug 2009, 1:22 AM
Sorry, (cursed my English). I insert Dataview in right Panel(as the example in the Api Documentation for the Ext.DataView), and in the event of Dataview I insert the generation of the resizable object. Correctly?

Animal
13 Aug 2009, 1:24 AM
Well show the code for that then because I see no Record being added to any DataView!

TAG
13 Aug 2009, 1:27 AM
Sorry, I did not understand your last post

TAG
13 Aug 2009, 1:45 AM
I read the Api Documentation for the DataView. But I have to create objects within a panel are "drag and resizable" as application at: http://oryx-editor.org/backend/poem/repository.

I do not think possible with DataView to create something similar.
what is your opinion about it?

Animal
13 Aug 2009, 3:31 AM
That's nice. Is that what you are working on?

No, that's not a DataView. That's a highly customized subclass.

Not just a cobbled up, confused throwing together of Panels in Panels.

TAG
14 Aug 2009, 12:14 AM
I create application with GUI such at Ext example named "complex.html"(ext-3.0.0\examples\layout), I added Tab Panel and Panel in the areas left and right, but I haven't used the properties of the panels "contentEl", all panels haven't a "div" but created only by Ext(and I haven't problem). Only for the central area(region="center"), I insert in <body></body>, a <div id="centrale1"></div>, and the central Panel have a "contentEl: 'centrale1' ". In this last div I inset this code:<div id="idGenericTitoloGriglia" class="griglia"><img id="oggetto1DD" src="oggetti/generici/oggetto1.JPG" height="100" width="100">
Summing up the html code is


<body>
<div id="centrale1">
<div id="idGenericTitoloGriglia" class="griglia"><img id="oggetto1DD" src="oggetti/generici/oggetto1.JPG" height="100" width="100"></div>
</div>
</body>
Next I write this code Ext:


var pippo=new Ext.Resizable("oggetto1DD", {
wrap:true,
pinned:true,
handles: 'all',
draggable:true
});

var AreaCentrale = new Ext.TabPanel({
id: 'contenitoreMaster',
region:'center', deferredRender:true, enableTabScroll:true, autoScroll:true, activeTab:0, split: true,
items:[{
title: 'titolo',
contentEl:'centrale1',
iconCls: 'nuova',
closable:false,
autoScroll: true,
id: 'Genericidtitolo'
}
]
})
This code created a D&D and resizable Object, but the Object have a strange behavior.
Resizable function correctly. When I move the Object, this always remains fixed in the top left(hidden from the upper panel and left panel if its very small), when I scroll the central Panel, I can move the object, but only as long as this does not return to coincide with the new margin in the upper left of the Panel.
I have this question:
1) why object takes as a left margin and the top margins of the browser page and don't take the panel that contains it?
2)have I made mistakes in declaring the object drag and resizable?
3)Why the drag isn't working correctly?

Animal, for created the Object D&D and resizable I think, I put the code HTML IMG in the DIV of the Panel and give the code resizable and Drag, what do you think?