PDA

View Full Version : [CLOSED] How to create via Ext.js a draggable panel?



xeo4.it
Oct 10, 2012, 3:29 PM
Hi,
I can't to create a draggable panel via javascritp. See my sample.
Thank you.
Jimmy



<%@ Page Language="C#" %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<!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></title>


<script language="javascript" type="text/javascript">


var crateDragPanel = function () {


var newPanel = new Ext.Panel(
{
border: true,
frame: true,
width: 200,
title: "prova",
draggable:
{
insertProxy: false,
endDrag: endDragF
}
});


newPanel.setPosition(100, 100);


App.test.items.add(newPanel);


App.test.doLayout();


}


var endDragF = function (e) {


Ext.panel.DD.prototype.endDrag.apply(this, arguments);
}

</script>





</head>
<body style="background-color: Aqua">
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />


<ext:Button ID="btnNewPanel" runat="server" Text="Add Panel">
<Listeners>
<Click Handler="crateDragPanel();"></Click>
</Listeners>
</ext:Button>


<ext:TabPanel ID="tabPnl" Plain="true" TabPosition="Top" runat="server" Border="false" Height="500">
<Items>
<ext:Panel ID="test" runat="server" Border="false" Title="pluto" Closable="true" X="0" Y="0" >

</ext:Panel>
</Items>
</ext:TabPanel>
</form>
</body>
</html>

Daniil
Oct 10, 2012, 5:09 PM
Hi Jimmy,

Can you get a required Panel in markup?

If so, the simplest way for you is here:
http://forums.ext.net/showthread.php?20673&p=89172&viewfull=1#post89172

xeo4.it
Oct 11, 2012, 8:32 AM
Hi Daniil,
I have followed your instructions and I have corrected the code, so I have discovered a problem.
See the new sample:



<%@ Page Language="C#" %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Ext.Net.Panel pnl = null;


TableLayoutConfig tlayC = new TableLayoutConfig();


pnl = new Ext.Net.Panel();


pnl.Icon = Ext.Net.Icon.TextAb;
pnl.Title = "Pnl From Server";


pnl.Border = true;


pnl.ID = "pnlFromServer1";

pnl.Frame = true;
pnl.X = 10;
pnl.Y = 20;


pnl.Width = 200;


pnl.Draggable = true;


pnl.DraggablePanelConfig = new DragSource();
pnl.DraggablePanelConfig.OnDrag.Fn = "onDragF";
pnl.DraggablePanelConfig.EndDrag.Fn = "endDragF";


tlayC = new TableLayoutConfig();
tlayC.Columns = 1;
pnl.LayoutConfig.Add(tlayC);
pnl.Layout = "TableLayout";


this.test.Items.Add(pnl);

}
</script>


<!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></title>


<script language="javascript" type="text/javascript">


var crateDragPanel = function () {


var newPanel = new Ext.Panel(
{
id: "pnlFromClient1",
border: true,
frame: true,
width: 200,
x: 60,
y: 100,
draggable: {
endDrag: endDragF,
onDrag: onDragF
},
layout: {
type: "table",
columns: 1
},
title: "Pnl From Client",
iconCls: "#TextAb"
});


newPanel.setPosition(100, 100);


App.test.items.add(newPanel);


App.test.doLayout();


}


var onDragF = function (e) {
var pel = this.proxy.getEl();


var xPos = pel.getLeft(true);
var yPos = pel.getTop(true);


var s = this.panel.getEl().shadow;


if (s && this.x != null && this.y != null) {
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
}
}


var endDragF = function (e) {


if (this.lastPageX != null && this.lastPageY != null) {
this.panel.setPosition((this.lastPageX - 205), (this.lastPageY - 36));
this.panel.el.setStyle("opacity", this.panel.opacityXeo);
}


Ext.panel.DD.prototype.endDrag.apply(this, arguments);
}



</script>





</head>
<body style="background-color: Aqua">
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />


<ext:Button ID="btnNewPanel" runat="server" Text="Add Panel">
<Listeners>
<Click Handler="crateDragPanel();"></Click>
</Listeners>
</ext:Button>


<ext:TabPanel ID="tabPnl" Plain="true" TabPosition="Top" runat="server" Border="false" Height="500">
<DefaultTabMenu>
<ext:Menu ID="mnTab" runat="server" EnableScrolling="false" RenderToForm="true">
<Items>
<ext:Label ID="Label1" runat="server" StyleSpec="font-weight:bold;padding-left:30px;"/>
</Items>
</ext:Menu>
</DefaultTabMenu>
<Items>
<ext:Panel ID="test" runat="server" Border="false" Title="pluto" X="0" Y="0" Closable="true" BodyPadding="6" >

</ext:Panel>
</Items>
</ext:TabPanel>
</form>
</body>
</html>


On this sample when I add the new panel "pnlFromClient1" it is draggable, but if I don't add the panel "pnlFromServer1" from codebehind the panel "pnlFromClient1" is not draggable.
Test commentig the row in PageLoad:



pnl.Layout = "TableLayout";


//this.test.Items.Add(pnl);

}


Thank you

Jimmy

Daniil
Oct 11, 2012, 11:21 AM
Please replace

App.test.items.add(newPanel);
with

App.test.add(newPanel);

xeo4.it
Oct 11, 2012, 1:20 PM
Hi Daniil,
ok, it works fine.
Thank you very much.

Jimmy