Hi Daniil,
I will do manually what you said.
Now I have another problem in the same scenario, Here I am creating the panels dynamically and those are draggable and resizable,
For example I have one panel per row so that user can reduce the width/height and drag another panel in this remaining area, My question is while resizing the panel I need to set it's positions also along with size.
To do that I have written the following line in resize handler event but it is positioned in some other place
resizable.Listeners.Resize.Handler = "var p = " + pnlSection.ClientID + "; p.el.setStyle({width:'', height:''});p.setPosition(p.getBox().x,p.getBox().y);p.setSize(width, height);";
Here is the sample code to reproduce the scenario
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm16.aspx.cs" Inherits="ext1._3Appliction.WebForm16" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
int postionY = 50;
for (int i = 0; i < 2; i++)
{
Ext.Net.Panel pnlSection = new Ext.Net.Panel();
pnlSection.ID = "sectionPanel_" + Guid.NewGuid().ToString().Replace("-", "_");
pnlSection.Header = true;
pnlSection.Collapsible = true;
pnlSection.Icon = Ext.Net.Icon.Package;
pnlSection.Title = "SectionName";
pnlSection.Border = true;
pnlSection.ForceLayout = true;
pnlSection.AutoScroll = true;
pnlSection.Floating = true;
pnlSection.Draggable = true;
pnlSection.X = 50;
pnlSection.Y = postionY;
pnlSection.Width = 800;
pnlSection.Height = 300;
postionY += postionY + 330;
pnlSection.DraggableConfig.OnDrag.Fn = "onDrag";
pnlSection.DraggableConfig.EndDrag.Fn = "endDrag";
pnlSection.AddTo(pnlFormViewer);
Resizable resizable = new Resizable();
resizable.ID = "resizable" + Guid.NewGuid().ToString().Replace("-", "_");
resizable.Element = "={" + pnlSection.ClientID + ".el}";
resizable.Transparent = true;
resizable.Handles = ResizeHandle.All;
resizable.Listeners.Resize.Handler = "var p = " + pnlSection.ClientID + "; p.el.setStyle({width:'', height:''});p.setSize(width, height);";//p.setPosition(p.getBox().x,p.getBox().y);
resizable.Render();
}
}
}
</script>
<script type="text/javascript">
var 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());
}
};
var endDrag = function(e) {
this.panel.setPosition(this.x, this.y);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Window ID="wndFormSectionsView" runat="server" Closable="false" Width="1000"
Height="700" AutoScroll="true" Title="Form Details" Frame="true" Modal="true"
Resizable="true">
<Items>
<ext:BorderLayout ID="blFormViewer" runat="server">
<Center>
<ext:Panel ID="pnlFormViewer" runat="server" AutoScroll="true" Border="false" ButtonAlign="Right">
</ext:Panel>
</Center>
</ext:BorderLayout>
</Items>
</ext:Window>
</form>
</body>
</html>
Thank you
nagamalli