[CLOSED] Unable to get the panels in Ext Net 3.0 DLL in Java Script

[mohan.bizbites]

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,endLimit);//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,QuestionColumnPosition:colIndex,QuestionRowPosition:QuestionrowIndex});                             
                                                }
                                            });
                                            QuestionrowIndex = parseInt(QuestionrowIndex)+parseInt(1);
                                        });
                                        colIndex = parseInt(colIndex)+parseInt(1);
                                    });
                                });
                            });
                        }
                    }
                });  
           
               #{DirectMethods}.SetFormSectionPostions(sectionPanelsData,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,endLimit);//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,QuestionColumnPosition:colIndex,QuestionRowPosition:QuestionrowIndex});                             
                                                }
                                            });
                                            QuestionrowIndex = parseInt(QuestionrowIndex)+parseInt(1);
                                        });
                                        colIndex = parseInt(colIndex)+parseInt(1);
                                    });
                                });
                            });
                        }
                    }
                });  
                debugger;
                #{DirectMethods}.SetFormSectionPostions(sectionPanelsData,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]

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...ation-Required

[RCN]

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]

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]

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...nt-method-getX
http://docs.sencha.com/extjs/5.0/5.0...nt-method-getY
http://docs.sencha.com/extjs/5.0/5.0...t-method-getXY