PDA

View Full Version : [CLOSED] Unable to get the panels in Ext Net 3.0 DLL in Java Script



mohan.bizbites
Dec 19, 2014, 2:00 PM
Hi Team,
I am working on the dynamic panels generation and drag and drop of the panels. in order to get the Exact X and Y value i am looping the code which i have implemented in ExtNet 1.7 DLL code.

Please find the code below


FormDesigner.aspx



<ext:XScript ID="xsFormViewer" runat="server">
<script lang="javascript" type="text/javascript">
var getAddedPanels = function() {
debugger;
var sectionPanelsData = [];
var sectionQuestions=[];
//get all the controls in the pages
Ext.ComponentMgr.all.each(function(item) {
if (item.getXType() == "panel") { //get only Ext panels
var itemId = item.id;
if (itemId.indexOf("sectionPanel_") !== -1) { //finding the only section panels out of all panels

var spLimit=itemId.indexOf("sectionPanel_");//returns the starting positin of "sectionPanel_" from the id
var spstartLimit = parseInt(spLimit)+parseInt(13);//adding length of "sectionPanel_" to start limit from there only our sectionId starts
var spendLimit=parseInt(spstartLimit)+parseInt(36);//36 is the length of the guid
var spId=itemId.substring(spstartLimit,spendLimit);//getting the SectionId
var spSectionId = spId.replace(/\_/g,'-');//Replacing the _ with - to form the original Guid(Sectionid)

sectionPanelsData.push({sectionId:spSectionId, sectionName: item.title, sectionWidth: item.getWidth(), sectionHeight: item.getHeight(), sectionPositionX: item.x, sectionPositionY: item.y });
item.items.each(function(pnlitem)//get child controls of section // these controls are from sectiondesigner.ascx
{
//this is pnlColumn1 in the sectiondesigner.ascx
pnlitem.items.each(function(portalItem)
{
//this is portal for all the questions to drag and drop
var colIndex=0;
portalItem.items.each(function(portalColumnItem)
{
//this is portalColumn
var QuestionrowIndex =0;
portalColumnItem.items.each(function(portletItem)
{
//this is portlet
portletItem.items.each(function(portletPanelItem)
{
var PortletQueId=portletPanelItem.id;
if(PortletQueId.indexOf("_Question") !== -1)
{
var stLimit=PortletQueId.indexOf("_Question");//returns the starting positin of "_Question" from the id
var startLimit = parseInt(stLimit)+parseInt(9);//adding length of "_Question" to start limit from there only our questionId starts
var endLimit=parseInt(startLimit)+parseInt(36);//36 is the length of the guid
var secquestionId=PortletQueId.substring(startLimit,en dLimit);//getting the questionId
secquestionId = secquestionId.replace(/\_/g,'-');//Replacing the _ with - to form the original Guid(Questionid)
sectionQuestions.push({sectionId:spSectionId , sectionName: item.title,QuestionId:secquestionId,QuestionColumn Position:colIndex,QuestionRowPosition:QuestionrowI ndex});
}
});
QuestionrowIndex = parseInt(QuestionrowIndex)+parseInt(1);
});
colIndex = parseInt(colIndex)+parseInt(1);
});
});
});
}
}
});

#{DirectMethods}.SetFormSectionPostions(sectionPan elsData,sectionQuestions);
parent.Ext.WindowMgr.getActive().hide();

}
var btnSelectQuestion = function() {
// parent.Ext.WindowMgr.getActive().hide();
var sectionPanelsData = [];
var sectionQuestions=[];
//get all the controls in the pages
Ext.ComponentMgr.all.each(function(item) {
if (item.getXType() == "panel") { //get only Ext panels
var itemId = item.id;
if (itemId.indexOf("sectionPanel_") !== -1) { //finding the only section panels out of all panels

var spLimit=itemId.indexOf("sectionPanel_");//returns the starting positin of "sectionPanel_" from the id
var spstartLimit = parseInt(spLimit)+parseInt(13);//adding length of "sectionPanel_" to start limit from there only our sectionId starts
var spendLimit=parseInt(spstartLimit)+parseInt(36);//36 is the length of the guid
var spId=itemId.substring(spstartLimit,spendLimit);//getting the SectionId
var spSectionId = spId.replace(/\_/g,'-');//Replacing the _ with - to form the original Guid(Sectionid)

sectionPanelsData.push({sectionId:spSectionId, sectionName: item.title, sectionWidth: item.getWidth(), sectionHeight: item.getHeight(), sectionPositionX: item.x, sectionPositionY: item.y });
item.items.each(function(pnlitem)//get child controls of section // these controls are from sectiondesigner.ascx
{
//this is pnlColumn1 in the sectiondesigner.ascx
pnlitem.items.each(function(portalItem)
{
//this is portal for all the questions to drag and drop
var colIndex=0;
portalItem.items.each(function(portalColumnItem)
{
//this is portalColumn
var QuestionrowIndex =0;
portalColumnItem.items.each(function(portletItem)
{
//this is portlet
portletItem.items.each(function(portletPanelItem)
{
var PortletQueId=portletPanelItem.id;
if(PortletQueId.indexOf("_Question") !== -1)
{
var stLimit=PortletQueId.indexOf("_Question");//returns the starting positin of "_Question" from the id
var startLimit = parseInt(stLimit)+parseInt(9);//adding length of "_Question" to start limit from there only our questionId starts
var endLimit=parseInt(startLimit)+parseInt(36);//36 is the length of the guid
var secquestionId=PortletQueId.substring(startLimit,en dLimit);//getting the questionId
secquestionId = secquestionId.replace(/\_/g,'-');//Replacing the _ with - to form the original Guid(Questionid)
sectionQuestions.push({sectionId:spSectionId , sectionName: item.title,QuestionId:secquestionId,QuestionColumn Position:colIndex,QuestionRowPosition:QuestionrowI ndex});
}
});
QuestionrowIndex = parseInt(QuestionrowIndex)+parseInt(1);
});
colIndex = parseInt(colIndex)+parseInt(1);
});
});
});
}
}
});
debugger;
#{DirectMethods}.SetFormSectionPostions(sectionPan elsData,sectionQuestions);
#{DirectMethods}.btnSelectQuestion();
#{wndQuestions}.hide();
parent.Ext.WindowMgr.getActive().hide();
}
</script> </ext:XScript>
<div>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Panel ID="pnlFormViewer" runat="server" AutoScroll="true" Height="20000" Layout="AnchorLayout">
<CustomConfig>
<ext:ConfigItem Name="insertProxy" Value="false" Mode="Raw" />
</CustomConfig>
<TopBar>
<ext:Toolbar ID="sTool" runat="server">
<Items>
<ext:Button ID="btnSavePostions" runat="server" Text="Done" Icon="Accept">
<Listeners>
<Click Handler="getAddedPanels();" />
</Listeners>
<%-- <DirectEvents>
<Click OnEvent="PositionFormSections">
</Click>
</DirectEvents>--%>
</ext:Button>
<ext:Button ID="btnCancel" runat="server" Text="Cancel" Icon="Cancel">
<Listeners>
<Click Handler="parent.Ext.WindowMgr.getActive().hide();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Buttons>
<%-- <ext:Button ID="btnAddQuestions" runat="server" Text="Add Questions">
<DirectEvents>
<Click OnEvent="AddQuestionsToSelectedSections">
</Click>
</DirectEvents>
</ext:Button>--%>
</Buttons>
</ext:Panel>
</div>




FormDesigner.aspx.cs



protected override void OnInit(EventArgs e)
{
LoadDummyData();
}
private void LoadDummyData()
{
for (int i = 0; i <= 2; i++)
{
TestUserControl tst = (TestUserControl)this.LoadControl("~/UserControls/TestUserControl.ascx");
tst.ID = "test"+i.ToString();
Ext.Net.Panel pnlDyn = new Ext.Net.Panel();
pnlDyn.ID = "pnl" + i.ToString();
pnlDyn.Title = "Dynamic Panel";
pnlDyn.ContentControls.Add(tst);
pnlDyn.Width = 200;
pnlDyn.Height = 200;
pnlDyn.X = 50;
pnlDyn.Y = 100;
pnlDyn.Draggable = true;


pnlFormViewer.Items.Add(pnlDyn);
}
}



TestUserControl.ascx


<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TestUserControl.ascx.cs" Inherits="Kolme.PeopleRecords.UserControls.TestUserControl" %>




<table>
<tr>
<td>Name</td>
<td><ext:TextArea ID="txt" runat="server" /> </td>
</tr>
</table>






The same code whih iam implementing with EXT Net 3.0 DLL.. but in the Javascript i am getting error while looping the ComponentMgr in the method "getAddedPanels ()".

Could you please help me out with this issue.
Thanks in Advance

Regards
BizBites

geoffrey.mcgill
Dec 19, 2014, 2:25 PM
Hello,

There are lots of JavaScript changes if upgrading from v1.x to v3.x. You'll have to step through your JavaScript code and try to narrow down the problem. You will have to review the BREAKING_CHANGES for both Ext.NET 2.x and Ext.NET 3.x.

As well, we request that you provide a simplified sample that we can copy + paste into our test project, and run without having to fix other exceptions. Unfortunately, if you cannot provide a simplified sample as suggested in the Forum Guidelines (link below), we are unable to provide assistance.

http://forums.ext.net/showthread.php?10205-More-Information-Required

RCN
Dec 19, 2014, 4:48 PM
Hi Mohan, as stated by Geoffrey, it would be easier to help if you provide a complete but minified sample.

But at this time i could suggest the following:

Detect when a component is registered and do what is needed. I think that it would be easier if your panels have specific custom configs that could be infered by your code that the panel must be processed instead of navigating through the components tree.



Ext.override(Ext.ComponentManager, {
register: function (item) {
this.callParent(arguments);
//Your code...
if (item.xtype == "panel") {
//...
}
},
unregister: function (item) {
this.callParent(arguments);
//Your code...
if (item.xtype == "panel") {
//...
}
}
});


To help you about navigating through the components tree, it's necessary a complete but minified sample.


var yourFunc = function () {
for (var cmpID in Ext.ComponentManager.all) {
var cmp = Ext.ComponentManager.all[cmpID];
//Your code...
if (cmp.xtype == "panel") {
//...
}
}
}

mohan.bizbites
Dec 25, 2014, 6:55 AM
Hi Geoffrey and Raphael Saldanha,
Thanks for the response, mainly i am facing problem with the java script attached above. Actually the same code what i have been used for EXTNET 1.7 DLL working fine, where as now we moved our application to the EXTNET 3.0 DLL. mainly i want to get the 'X' and 'Y' co-ordinates of the dragged panels.
Here i am providing the code with out java script.


FormDesigner.aspx


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>

<body> <form id="form1" runat="server">
<div>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Panel ID="pnlFormViewer" runat="server" AutoScroll="true" Height="20000" Layout="AnchorLayout">
<CustomConfig>
<ext:ConfigItem Name="insertProxy" Value="false" Mode="Raw" />
</CustomConfig>
<TopBar>
<ext:Toolbar ID="sTool" runat="server">
<Items>
<ext:Button ID="btnSavePostions" runat="server" Text="Done" Icon="Accept">
<Listeners>
<Click Handler="getAddedPanels();" />
</Listeners>
<%-- <DirectEvents>
<Click OnEvent="PositionFormSections">
</Click>
</DirectEvents>--%>
</ext:Button>
<ext:Button ID="btnCancel" runat="server" Text="Cancel" Icon="Cancel">
<Listeners>
<Click Handler="parent.Ext.WindowMgr.getActive().hide();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Buttons>
<%-- <ext:Button ID="btnAddQuestions" runat="server" Text="Add Questions">
<DirectEvents>
<Click OnEvent="AddQuestionsToSelectedSections">
</Click>
</DirectEvents>
</ext:Button>--%>
</Buttons>
</ext:Panel>
</div>
</form>
</body>
</html>



FormDesigner.aspx.cs



using Ext.Net;using Kolme.Entities.General;
using Kolme.PeopleRecords.UserControls;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;


namespace Kolme.PeopleRecords.Pages.General
{
public partial class FormDesigner
{
protected void Page_Load(object sender, EventArgs e) {
for (int i = 0; i <= 2; i++) {
TestUserControl tst = (TestUserControl)this.LoadControl("~/UserControls/TestUserControl.ascx");
tst.ID = "test"+i.ToString();
Ext.Net.Panel pnlDyn = new Ext.Net.Panel();
pnlDyn.ID = "pnl" + i.ToString();
pnlDyn.Title = "Dynamic Panel";
pnlDyn.ContentControls.Add(tst);
pnlDyn.Width = 200;
pnlDyn.Height = 200;
pnlDyn.X = 50;
pnlDyn.Y = 100;
pnlDyn.Draggable = true;
pnlFormViewer.Items.Add(pnlDyn);
}
}
}
}


TestUserControl.ascx



<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TestUserControl.ascx.cs" Inherits="Kolme.PeopleRecords.UserControls.TestUserControl" %>



<table>
<tr>
<td>Name</td>
<td><ext:TextArea ID="txt" runat="server" /> </td>
</tr>
</table>


Here is the code, Could you please provide the JavaScript code for getting the 'X' and 'Y' Co-ordinates of the Dragged panels which are created dynamically on the "Done" button click.

Thanks in Advance
A.Shrujan Kumar

Daniil
Dec 25, 2014, 2:37 PM
Hi @mohan.bizbites,


mainly i want to get the 'X' and 'Y' co-ordinates of the dragged panels.

I would try the .getX() and .getY() methods. Or the .getXY() method.

Example

panel.getXY();

See also
http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.Component-method-getX
http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.Component-method-getY
http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.Component-method-getXY