PDA

View Full Version : add div dynamically to panel



prajeesh_bs
20 Apr 2011, 8:59 PM
I have a panel. Each time i click on a button, I need to add div into the panel. These divs should be draggable anywhere in the panel. How this can be done? can anybody paste a sample code?

stevil
21 Apr 2011, 2:48 AM
Without more detail it's hard to say how one would do that - what's in the div? what is surrounding it? how is that content laid out?

I know that the DataView examples are interesting, although I don't know that they do what you want out of the box, they may be customizable:

http://dev.sencha.com/deploy/ext-4.0-beta3/examples/view/chooser/chooser.html

good luck!

stevil

prajeesh_bs
21 Apr 2011, 4:32 AM
hi,
Thanks for response. I will explain my issue.
I am preparing an app for making reports. The reports contain charts, graphs etc. I have a tools section at the bottom.These tools are nothing but charts/graphs etc. Each time i click on a tool, a component (tats wat i mentioned as div in my first post) should be added on the center panel. In the center panel all the customization is done. I need to drag and drop the components anywhere in the center panel. Finally when i click the save button i need to send width,height,position of each component to server side. Using these info an xhtml page (in my case it is report) is to be generated.
Can anyone help?

friend
21 Apr 2011, 9:22 AM
Sounds like you're sort of describing an Ext.ux.Portal layout...

prajeesh_bs
23 Apr 2011, 4:13 AM
hi friend,

In portal when we drag and drop a portlet the rest of the portlets in that column will be rearranged automatically. I want the remaining portlets to stay in their original position.

friend
23 Apr 2011, 1:35 PM
Here's a start, using Panels for everything. The drop code needs a little work as it uses the top/left x/y coordinates as the drop position.



<html>
<head>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext/resources/css/xtheme-blue.css" />

<script type="text/javascript" src="ext/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="ext/ext-all-debug-w-comments.js"></script>

<script type="text/javascript">
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.QuickTips.init();

var p = new Ext.Panel({
border: false,
layout: 'absolute',
ref: 'containerPanel',
title: 'Container Panel'
});

var dragMeToHeckAndBack = {
insertProxy: false,
onDrag : function(e){
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);
var s = this.panel.getEl().shadow;
if (s) {
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
}
},
endDrag : function(e){
this.panel.el.setX(e.xy[0]);
this.panel.el.setY(e.xy[1]);
}
};

w = new Ext.Window({
height: 600,
layout: 'fit',
resizable: false,
width: 800,
items: [p],
buttons: [{
text: 'Add Panel',
handler: function() {
var childPanelCount = w.containerPanel.items.length;

var startYPosition = 10;
startYPosition = startYPosition * childPanelCount;

var childPanel = new Ext.Panel({
draggable: dragMeToHeckAndBack,
layout: 'fit',
height: 100,
title: 'New Panel ' + (childPanelCount + 1),
width: 200,
x: 10,
y: startYPosition
});

w.containerPanel.add(childPanel);
w.containerPanel.doLayout();
}
}]
});

w.show();
});
</script>

</head>
<body>
</body>
</html>

prajeesh_bs
24 Apr 2011, 8:40 PM
hi friend,
Can u please explain how to make these child panels resizable

prajeesh_bs
24 Apr 2011, 9:40 PM
Using your code i am able to drag items, but dropping doesnot seem to work well.can u pls fix that. Also i need the container to auto Expand if i resize the child panels beyond the height of container panel. Is there any way to do this

prajeesh_bs
25 Apr 2011, 3:32 AM
After a lot of googling i have found out the method for dragging and resizing panels. Now the issue is as follows.
I have a set of child panels created dynamically by clicking a button.These child panels are inside a container panel. I need to pass the width, height,position of all the child panels to server side when i click on save button. How this can be done?
my code is as follows

<script type="text/javascript">
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.QuickTips.init();
var tools = [{
id:'gear',
handler: function(){
Ext.Msg.alert('Message', 'The Settings tool was clicked.');
}
},{
id:'close',
handler: function(e, target, panel){
panel.ownerCt.remove(panel, true);
}
}];

Ext.override(Ext.Panel, {
// private
initEvents : function(){

if(this.draggable){
this.initDraggable();
}
this.resizer = new Ext.Resizable(this.el, {
animate: true,
duration: '.6',
easing: 'backIn',
handles: 'all', // handles:'s' gives vertical resizing only
// minHeight: this.minHeight || 100,
// minWidth:this.minWidth || 100,
pinned: false,
transparent:true
});
this.resizer.on("resize", this.onResizer, this);
},
onResizer : function(oResizable, iWidth, iHeight, e) {
this.setHeight(iHeight);
this.setWidth(iWidth);
//alert(iHeight);
}

});
var p = new Ext.Panel({
border: false,
layout: 'absolute',
autoScroll:true,
margins:'0 0 5 0',
ref: 'containerPanel',
resizable: true,
//title: 'Container Panel',
buttons: [{
text: 'Add Panel',
handler: function() {
var childPanelCount = w.containerPanel.items.length;

var startYPosition = 10;
startYPosition = startYPosition * childPanelCount;

var childPanel = new Ext.Panel({
draggable: dragMeToHeckAndBack,
layout: 'fit',
height: 100,
title: 'New Panel ' + (childPanelCount + 1),
resizable: true,
width: 200,
x: 10,
y: startYPosition,
tools: tools

});

w.containerPanel.add(childPanel);
w.containerPanel.doLayout();
}
}]
});

var dragMeToHeckAndBack = {
insertProxy: false,
onDrag : function(e){
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);
var s = this.panel.getEl().shadow;
if (s) {
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
}
},
endDrag : function(e){
this.panel.el.setX(this.x);
this.panel.el.setY(this.y);
}
};

w = new Ext.Window({
height: 600,
autoScroll:true,
layout: 'fit',
resizable: false,
width: 800,
items: [p]

});

w.show();
});
</script>

can anybodyy help?

friend
25 Apr 2011, 3:55 AM
hi friend,
Can u please explain how to make these child panels resizable


Add 'resizable: true' to the childPanel.

friend
25 Apr 2011, 4:35 AM
Using your code i am able to drag items, but dropping does not seem to work well. can u pls fix that?

Sorry, no, I can't fix that. But maybe you can, if you experiment with the provided code sample.

Thx.

friend
25 Apr 2011, 4:51 AM
I need to pass the width, height,position of all the child panels to server side when i click on save button. How this can be done?

If you read the Ext.Panel API docs (http://dev.sencha.com/deploy/dev/docs/?class=Ext.Panel), you'll find a variety of methods by which you can get the size/position of each child Panel (e.g., getPosition(), getWidth(), getHeight()).

You could loop through all the child panels in the container panel, collect the size/position, store the results to a JSON structure, then submit the JSON via Ext.Ajax.request() (http://dev.sencha.com/deploy/dev/docs/?class=Ext.Ajax).