What's New?

[CLOSED] Panel HTML property doesn't show JavaScript

  1. #1
    Jan 20, 2011, 1:38 PM

    [CLOSED] Panel HTML property doesn't show JavaScript

    Hi,

    I have problem with Panel control html property. Screenshots are below.

    As you saw that I set basic html code in first picture and I can see that html code in pnl.body.dom.innerHTML property in second picture.

    But, when I set Javascript in third picture , I can't see same value in pnl.body.dom.innerHTML property in forth picture.

    I have to take same value. So, What should I do in this case?

    Attachment 2217

    Attachment 2218

    Attachment 2219

    Attachment 2220
    Last edited by Daniil; Jan 20, 2011 at 3:59 PM. Reason: [CLOSED]
  2. #2
    Jan 20, 2011, 1:58 PM
    Hi,

    Update method extract all scripts from html and executes it because if you add a script to innerHTML then thye script will not be executed by browser

    You can try the following code
    pnl.update(html,true);
pnl.body.dom.innerHTML = html;
  3. #3
    Jan 20, 2011, 2:03 PM
    Hi,

    I used this way. But, this time it is empty.
  4. #4
    Jan 20, 2011, 2:07 PM
    Hi,

    Not sure, what is empty? innerHTML?
  5. #5
    Jan 20, 2011, 2:08 PM
    Hi,

    Yes innerHTML property is empty.
  6. #6
    Jan 20, 2011, 2:39 PM
    Hi,

    I am not sure that all browsers return script tags in innerHTML because script tags is not markup.
    I make small sample with div element and IE doesn't return script tags

    <%@ 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 id="Head1" runat="server">
    <title></title>
    
    <script type="text/javascript">
        function applyScript(){
            var s = "<script type='text/javascript'>alert('Hello');</" + "script><b>Test</b>",
                div = document.getElementById("div1");           
            
            div.innerHTML = s;
            
            alert(div.innerHTML);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server">
        </ext:ResourceManager>
        
        <div id="div1"></div>
        
        <ext:Button runat="server" Text="Apply">
            <Listeners>
                <Click Handler="applyScript();" />
            </Listeners>
        </ext:Button>
    </form>
</body>
</html>
    So, it is dependable from browser
  7. #7
    Jan 20, 2011, 2:45 PM
    Hi,

    Actually it works very well. But, you gave me some code previous problems.

    If I remove Ext.net.DirectMethods.Button_ApplyTableLayoutPrope rties_Click(Ext.encode(getPanelsDetails(Panel9))); this row in Button_ApplyChanges_Click javascript function, it works very well. But, If I use this code, it creates problem.

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;

namespace WebApplication9
{
    public partial class WebForm8 : System.Web.UI.Page
    {
        //private void ChangeMode(string mode)
        //{
        //    foreach (Ext.Net.Cell item in TableLayout1.Cells)
        //    {
        //        Ext.Net.Container cnt = item.Items[0] as Ext.Net.Container;
        //        Ext.Net.Panel pnl = cnt.Items[0] as Ext.Net.Panel;
        //        bool header = true;
        //        bool border = true;

        //        if (mode == "DesignMode")
        //        {
        //            //pnl.AddScript(pnl.ClientID + ".header.show();");
        //            //pnl.AddScript(pnl.ClientID + ".removeClass('no-border');");
        //            header = true;
        //            border = true;
        //        }
        //        else if (mode == "ViewMode")
        //        {
        //            //pnl.AddScript(pnl.ClientID + ".header.hide();");
        //            //pnl.AddScript(pnl.ClientID + ".addClass('no-border');");

        //            //pnl.AddScript(pnl.ClientID + ".header.addClass('x-hide-display');");
        //            //pnl.AddScript(pnl.ClientID + ".header.setStyle('border','1');");
        //            //pnl.AddScript(pnl.ClientID + ".addClass('dd');");

        //            header = false;
        //            border = true;
        //        }

        //        X.Js.Call("setBorder", new JRawValue(pnl.ClientID), border, header);
        //    }
        //}

        //[DirectMethod]
        //public void Button_DesignMode_Click()
        //{
        //    ChangeMode("DesignMode");
        //}

        //[DirectMethod]
        //public void Button_ViewMode_Click()
        //{
        //    ChangeMode("ViewMode");
        //}

        public class PanelDetails
        {
            [Newtonsoft.Json.JsonProperty(PropertyName = "containerID")]
            public string ContainerID
            {
                get;
                set;
            }

            [Newtonsoft.Json.JsonProperty(PropertyName = "index")]
            public int Index
            {
                get;
                set;
            }

            [Newtonsoft.Json.JsonProperty(PropertyName = "width")]
            public int Width
            {
                get;
                set;
            }

            [Newtonsoft.Json.JsonProperty(PropertyName = "height")]
            public int Height
            {
                get;
                set;
            }

            [Newtonsoft.Json.JsonProperty(PropertyName = "colSpan")]
            public int ColSpan
            {
                get;
                set;
            }

            [Newtonsoft.Json.JsonProperty(PropertyName = "rowSpan")]
            public int RowSpan
            {
                get;
                set;
            }

            [Newtonsoft.Json.JsonProperty(PropertyName = "url")]
            public string Url
            {
                get;
                set;
            }

            [Newtonsoft.Json.JsonProperty(PropertyName = "header")]
            public bool Header
            {
                get;
                set;
            }

            [Newtonsoft.Json.JsonProperty(PropertyName = "border")]
            public bool Border
            {
                get;
                set;
            }

            [Newtonsoft.Json.JsonProperty(PropertyName = "title")]
            public string Title
            {
                get;
                set;
            }

            [Newtonsoft.Json.JsonProperty(PropertyName = "html")]
            public string Html
            {
                get;
                set;
            }
        }

        [DirectMethod]
        public void Button_ApplyTableLayoutProperties_Click(System.Collections.Generic.Dictionary<string, PanelDetails> details)
        {
            var items = new System.Collections.Generic.Dictionary<string, Container>();
            List<string> resizables = new List<string>();
            foreach (Ext.Net.Cell item in TableLayout1.Cells)
            {
                var ct = item.Items[0] as Ext.Net.Container;
                items.Add(ct.Items[0].ClientID, ct);
                item.Items.Clear();
            }

            TableLayout1.Items.Clear();

            foreach (string id in details.Keys)
            {
                if (items.Keys.Contains(id) == false)
                {
                    Ext.Net.Container newContainer = X.GetCmp<Ext.Net.Container>(details[id].ContainerID);
                    newContainer.Layout = "Fit";
                    newContainer.Cls = "dropable";

                    Ext.Net.Panel newPanel = X.GetCmp<Ext.Net.Panel>(id);
                    newPanel.Cls = "draggable";
                    newPanel.Frame = false;
                    newPanel.StyleSpec = "padding: 5px";
                    newPanel.DraggableConfig.Group = "panelDD";
                    newPanel.DraggableConfig.StartDrag.Fn = "startDrag";
                    newPanel.DraggableConfig.EndDrag.Fn = "endDrag";
                    newPanel.Title = details[id].Title;
                    bool header = details[id].Header;
                    bool border = details[id].Border;
                                        
                    //if (string.IsNullOrEmpty(details[id].Url)==false)
                    //{
                    //    newPanel.AutoLoad.Url = details[id].Url;
                    //    newPanel.LoadContent(details[id].Url);
                    //}

                    Ext.Net.Tool tool = new Tool();
                    tool.Type = ToolType.Gear;
                    tool.Handler = "ShowWindow(" + id + ");";

                    newPanel.Tools.Add(tool);

                    newContainer.Items.Add(newPanel);
                    Ext.Net.Cell newCell = new Cell();
                    newCell.Items.Add(newContainer);
                    TableLayout1.Cells.Add(newCell);
                    items.Add(newContainer.Items[0].ClientID, newContainer);
                    TableLayout1.Cells[details[id].Index].Items.Clear();
                    resizables.Add(id);
                }

                var panelDetails = details[id];
                foreach (string key in items.Keys)
                {
                    if (key == id)
                    {
                        var ct = items[key];
                        ct.Width = panelDetails.Width;
                        ct.Height = panelDetails.Height;
                        ((Ext.Net.Panel)items[key].Items[0]).Title = details[id].Title;
                        ((Ext.Net.Panel)items[key].Items[0]).ClearContent();
                        bool header = details[id].Header;
                        bool border = details[id].Border;

                        ((Ext.Net.Panel)items[key].Items[0]).AddScript(((Ext.Net.Panel)items[key].Items[0]).ClientID + ".header.visibilityMode={0};", header ? "1" : "0");
                        ((Ext.Net.Panel)items[key].Items[0]).AddScript(((Ext.Net.Panel)items[key].Items[0]).ClientID + ".initialConfig.border={0};", border ? "true" : "false");

                        if (string.IsNullOrEmpty(details[id].Url) == false)
                        {
                            ((Ext.Net.Panel)items[key].Items[0]).AutoLoad.Url = details[id].Url;
                            ((Ext.Net.Panel)items[key].Items[0]).LoadContent(details[id].Url);
                        }
                        else
                        {
                            string html = Server.HtmlDecode(details[id].Html);
                            ((Ext.Net.Panel)items[key].Items[0]).Update(html, true);
                        }

                        TableLayout1.Cells[panelDetails.Index].Items.Add(ct);
                        TableLayout1.Cells[panelDetails.Index].ColSpan = panelDetails.ColSpan;
                        TableLayout1.Cells[panelDetails.Index].RowSpan = panelDetails.RowSpan;
                        break;
                    }
                }
            }

            int columns = 2;
            if (string.IsNullOrEmpty(TextField_ColumnNumber.Text) == false)
                Hidden_TableLayoutColumns.Text = TextField_ColumnNumber.Text;

            if(string.IsNullOrEmpty(Hidden_TableLayoutColumns.Text)==false)
                columns = int.Parse(Hidden_TableLayoutColumns.Text);

            TableLayout1.Columns = columns;

            Panel9.Render();

            string[] resizableIds = new string[details.Keys.Count];
            int i = 0;
            foreach (string id in details.Keys)
            {
                var panelDetails = details[id];
                Resizable resizable = new Resizable();
                resizable.ID = panelDetails.ContainerID + "_resizable";
                resizable.Element = "={" + id + ".el}";
                resizable.Transparent = true;
                resizable.Listeners.Resize.Handler = "var p = " + id + "; p.el.setStyle({width:'', height:''});p.setSize(width, height); p.ownerCt.setSize(width, height);";
                resizable.Render();

                resizableIds[i++] = resizable.ID;
            }

            X.Js.AddScript("resizables = {0};", JSON.Serialize(resizableIds));
            DropTarget1.Render();
        }

        [DirectMethod]
        public void Button_AddNewCell_Click(Dictionary<string, PanelDetails> details)
        {
            PanelDetails panelDetails=new PanelDetails();
            panelDetails.ContainerID = "Container" + (details.Count + 1).ToString();
            panelDetails.Index = details.Count;
            panelDetails.Width = 200;
            panelDetails.Height = 200;
            panelDetails.ColSpan = 1;
            panelDetails.RowSpan = 1;
            panelDetails.Url = "";
            panelDetails.Header = true;
            panelDetails.Border = true;
            panelDetails.Title = "Panel " + (details.Count + 1).ToString();

            details.Add("pnl" + (details.Count + 1).ToString(), panelDetails);

            Button_ApplyTableLayoutProperties_Click(details);
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            Container[] panels = new Container[] { this.Container1, this.Container2, this.Container3 };

            foreach (Container region in panels)
            {
                Ext.Net.Panel p = (Ext.Net.Panel)region.Items[0];
                p.DraggableConfig.Group = "panelDD";
                p.DraggableConfig.StartDrag.Fn = "startDrag";
                p.DraggableConfig.EndDrag.Fn = "endDrag";
            }

            if (!X.IsAjaxRequest)
            {
                //Client side coding
                List<Resizable> resizables = Ext.Net.Utilities.ControlUtils.FindControls<Resizable>(this.Form);
                string[] resizableIds = new string[resizables.Count];
                int i = 0;
                foreach (var r in resizables)
                {
                    resizableIds[i++] = r.ID;
                }
                X.Js.AddScript("resizables = {0};", JSON.Serialize(resizableIds));
            }
        }
    }
}
    -------------------------------------------------------------------------------------------------------

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm8.aspx.cs" Inherits="WebApplication9.WebForm8"
    ValidateRequest="false" %>

<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>
<%@ 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 id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .invite
        {
            background-color: #99bbe8 !important;
        }
        .x-drop-marker
        {
            background-color: silver;
        }
        .no-border .x-panel-body
        {
            border: 0;
        }
        .cursor-default
        {
            cursor: default;
        }
    </style>
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server">
        <script type="text/javascript">
            var notifyDrop = function (source, e, data) {
                var targetCt = Ext.getCmp(this.el.dom.id);
                var targetPanel = targetCt.items.get(0);
                var sourceCt = data.panel.ownerCt;

                sourceCt.add(targetPanel);
                targetCt.add(data.panel);
                targetCt.doLayout.defer(10, targetCt);
                sourceCt.doLayout.defer(10, sourceCt);
            };

            var startDrag = function () {
                Ext.select(".dropable").addClass("x-drop-marker");
                Ext.select(".draggable").hide();
            };

            var endDrag = function () {
                Ext.select(".dropable").removeClass("x-drop-marker");
                Ext.select(".draggable").show();
            };

            var ChangeMode = function (mode) {
                var header = true;
                var border = true;

                if (mode == "DesignMode") {
                    header = true;
                    border = true;
                }
                else if (mode == "ViewMode") {
                    header = true;
                    border = true;
                }

                var Panel9 = Ext.getCmp('<%= Panel9.ClientID %>');
                Panel9.items.each(function (item, index) {
                    var p = Ext.getCmp(item.get(0).id);
                    setBorder(p, border, header, mode);
                });
            };

            var setBorder = function (panel, useBorder, useHeader, mode) {
                var method = (useBorder && (mode == "DesignMode" || panel.initialConfig.border == undefined)) || (useBorder && panel.initialConfig.border !== 'undefined' && panel.initialConfig.border == true) ? "removeClass" : "addClass";
                panel.el[method](panel.baseCls + '-noborder');
                panel.body[method](panel.bodyCls + '-noborder');

                if (mode == "DesignMode") {
                    panel.tools.gear.show();
                }
                else if (mode == "ViewMode") {
                    panel.tools.gear.hide();
                }

                if (panel.header) {
                    panel.header[method](panel.headerCls + '-noborder');

                    if (mode == 'ViewMode') {
                        panel.header[panel.header.visibilityMode == 1 ? "removeClass" : "addClass"]("x-hide-display");
                        panel.body[panel.header.visibilityMode == 1 ? "removeClass" : "addClass"](panel.bodyCls + '-noheader'); //added
                    } else {
                        panel.header[useHeader ? "removeClass" : "addClass"]("x-hide-display");
                        panel.body[useHeader ? "removeClass" : "addClass"](panel.bodyCls + '-noheader'); //added
                    }

                    //                    panel.header[method](panel.headerCls + '-noborder');
                    //                    panel.header[useHeader ? "removeClass" : "addClass"]("x-hide-display");
                    //                    panel.body[useHeader ? "removeClass" : "addClass"](panel.bodyCls + '-noheader'); //added
                }
                if (panel.footer) {
                    panel.footer[method](panel.footerCls + '-noborder');
                }
                if (panel.tbar) {
                    panel.tbar[method](panel.tbarCls + '-noborder');
                }
                if (panel.bbar) {
                    panel.bbar[method](panel.bbarCls + '-noborder');
                }

                //added
                panel.syncSize();

                if (panel.ownerCt) {
                    panel.ownerCt.doLayout();
                }
            };

            var Button_DesignMode_Click = function () {
                var Hidden_Mode = Ext.getCmp('<%= Hidden_Mode.ClientID %>');
                Hidden_Mode.setValue('DesignMode');

                ChangeMode('DesignMode');
                setResizableEnabled(true);
            };

            var Button_ViewMode_Click = function () {
                var Hidden_Mode = Ext.getCmp('<%= Hidden_Mode.ClientID %>');
                Hidden_Mode.setValue('ViewMode');

                ChangeMode('ViewMode');
                setResizableEnabled(false);
            };

            var ShowWindow = function (panel) {
                var Hidden_ContainerName = Ext.getCmp('<%= Hidden_ContainerName.ClientID %>');
                var Hidden_PanelName = Ext.getCmp('<%= Hidden_PanelName.ClientID %>');

                Hidden_ContainerName.setValue(panel.ownerCt.id);
                Hidden_PanelName.setValue(panel.id);

                var Window1 = Ext.getCmp('<%= Window1.ClientID %>');
                var cnt = panel.ownerCt;
                var containerCell = cnt.container.dom;
                var NumberField_Width = Ext.getCmp('<%= NumberField_Width.ClientID %>');
                var NumberField_Height = Ext.getCmp('<%= NumberField_Height.ClientID %>');
                var TextField_Url = Ext.getCmp('<%= TextField_Url.ClientID %>');
                var TextField_ColSpan = Ext.getCmp('<%= TextField_ColSpan.ClientID %>');
                var TextField_RowSpan = Ext.getCmp('<%= TextField_RowSpan.ClientID %>');
                var TextField_RowSpan = Ext.getCmp('<%= TextField_RowSpan.ClientID %>');
                var Checkbox_Header = Ext.getCmp('<%= Checkbox_Header.ClientID %>');
                var Checkbox_Border = Ext.getCmp('<%= Checkbox_Border.ClientID %>');
                var TextField_Title = Ext.getCmp('<%= TextField_Title.ClientID %>');

                var panelInnerHTML = panel.body.dom.innerHTML;
                SetFCKeditorHTML('<%= FCKeditor1.ClientID %>', panelInnerHTML);

                Checkbox_Header.setValue(Boolean(panel.header.visibilityMode));
                Checkbox_Border.setValue(Boolean(panel.initialConfig.border !== 'undefined' && panel.initialConfig.border !== false ? 1 : 0));
                NumberField_Width.setValue(cnt.getWidth());
                NumberField_Height.setValue(cnt.getHeight());
                TextField_ColSpan.setValue(containerCell.colSpan);
                TextField_RowSpan.setValue(containerCell.rowSpan);
                TextField_Title.setValue(panel.title);
                var autoLoad = panel.getAutoLoad();
                if (autoLoad != null)
                    TextField_Url.setValue(autoLoad.url);
                Window1.show();
            };

            var FCKeditor_OnComplete = function (editorInstance) {
                editorInstance.SetHTML('');
            };

            window.onload = function () {

            };

            var Resizable_Resize = function (container, width, height) {
                //container.el.setStyle({ width: '', height: '' });
                container.setSize(width, height);
                //container.doLayout();
            };

            var GetFCKeditorHTML = function (instanceName) {
                //Get the editor instance that we want to interact with.
                var oEditor = FCKeditorAPI.GetInstance(instanceName);

                //Get the editor contents as XHTML.
                return oEditor.GetXHTML(true); // "true" means you want it formatted.
            };

            var SetFCKeditorHTML = function (instanceName, html) {
                var FCKeditor = FCKeditorAPI.GetInstance(instanceName);

                if (FCKeditor.EditingArea.Textarea != null) {
                    FCKeditor.EditingArea.Textarea.innerText = '';
                    //                    FCKeditor.EditingArea.Textarea.innerHTML = '';
                    FCKeditor.EditingArea.Textarea.value = '';

                    if (html != null && html != '') {
                        FCKeditor.EditingArea.Textarea.innerText = html;
                        //                        FCKeditor.EditingArea.Textarea.innerHTML = html;
                        FCKeditor.EditingArea.Textarea.value = html;

                        if (FCKeditor.EditMode == 0) {
                            FCKeditor.SwitchEditMode();
                        }
                    } else if (FCKeditor.EditMode == 1) {
                        FCKeditor.SwitchEditMode();
                    }


                } else if (FCKeditor.IsDirty() == false && FCKeditor.EditMode == 1) {
                    FCKeditor.SwitchEditMode();
                }
            };

            var Button_ApplyChanges_Click = function () {
                var Hidden_ContainerName = Ext.getCmp('<%= Hidden_ContainerName.ClientID %>');
                var Hidden_PanelName = Ext.getCmp('<%= Hidden_PanelName.ClientID %>');
                var TextField_Url = Ext.getCmp('<%= TextField_Url.ClientID %>');
                var TextField_ColSpan = Ext.getCmp('<%= TextField_ColSpan.ClientID %>');
                var TextField_RowSpan = Ext.getCmp('<%= TextField_RowSpan.ClientID %>');
                var NumberField_Width = Ext.getCmp('<%= NumberField_Width.ClientID %>');
                var Checkbox_Header = Ext.getCmp('<%= Checkbox_Header.ClientID %>');
                var Checkbox_Border = Ext.getCmp('<%= Checkbox_Border.ClientID %>');
                var TextField_Title = Ext.getCmp('<%= TextField_Title.ClientID %>');
                var Checkbox_Resizable = Ext.getCmp('<%= Checkbox_Resizable.ClientID %>');


                var pnl = Ext.getCmp(Hidden_PanelName.getValue());
                var cnt = pnl.ownerCt;
                var containerCell = cnt.container.dom;

                var html = GetFCKeditorHTML('FCKeditor1');

                var width = NumberField_Width.getValue();
                var height = NumberField_Height.getValue();
                var colSpan = TextField_ColSpan.getValue();
                var rowSpan = TextField_RowSpan.getValue();
                var header = Checkbox_Header.checked;
                var border = Checkbox_Border.checked;
                var resizable = Checkbox_Resizable.checked;
                var url = TextField_Url.getValue();
                var title = TextField_Title.getValue();

                Resizable_Resize(cnt, width, height);
                containerCell.colSpan = colSpan;
                containerCell.rowSpan = rowSpan;
                pnl.header.visibilityMode = Checkbox_Header.checked ? 1 : 0;
                pnl.initialConfig.border = Boolean(Checkbox_Border.checked ? 1 : 0);
                pnl.setTitle(title);


                if (url == '') {
                    pnl.autoLoad = null;
                    pnl.clearContent();
                    pnl.update(html, true);
                } else {
                    pnl.load({
                        url: url,
                        nocache: false,
                        text: 'Loading...',
                        timeout: 30,
                        scripts: true
                    });
                }

                Ext.net.DirectMethods.Button_ApplyTableLayoutProperties_Click(Ext.encode(getPanelsDetails(Panel9)));
            };

            var Button_TableLayoutProperties_Click = function () {
                var Window_TableProperties = Ext.getCmp('<%= Window_TableProperties.ClientID %>');
                var TableLayout1 = Ext.getCmp('<%= TableLayout1.ClientID %>');
                var TextField_ColumnNumber = Ext.getCmp('<%= TextField_ColumnNumber.ClientID %>');
                var Panel9 = Ext.getCmp('<%= Panel9.ClientID %>');
                var columns = Panel9.layoutConfig.columns;

                TextField_ColumnNumber.setValue(columns);

                Window_TableProperties.show();
            };

            var getPanelsDetails = function (panel) {
                var obj = {};
                panel.items.each(function (item, index) {
                    var url = item.get(0).getAutoLoad().url;
                    var title = item.get(0).title;
                    var panelInnerHTML = item.get(0).body.dom.innerHTML;

                    obj[item.get(0).id] = {
                        containerID: item.id,
                        index: index,
                        width: item.getWidth(),
                        height: item.getHeight(),
                        colSpan: item.container.dom.colSpan,
                        rowSpan: item.container.dom.rowSpan,
                        url: url,
                        header: Boolean(item.get(0).header.visibilityMode),
                        border: Boolean((item.get(0).initialConfig.border == undefined) || (item.get(0).initialConfig.border !== 'undefined' && item.get(0).initialConfig.border == true) ? 1 : 0),
                        title: title,
                        html: Ext.util.Format.htmlEncode(panelInnerHTML)
                    };
                });

                return obj;
            };

            var Button_ApplyTableLayoutProperties_Click = function () {
                Ext.net.DirectMethods.Button_ApplyTableLayoutProperties_Click(Ext.encode(getPanelsDetails(Panel9)));
            };

            var Button_AddNewCell_Click = function () {
                Ext.net.DirectMethods.Button_AddNewCell_Click(Ext.encode(getPanelsDetails(Panel9)));
            };

            var setResizableEnabled = function (enabled) {
                for (var i = 0; i < resizables.length; i++) {
                    var rc = window[resizables[i]];
                    rc.east.el.setDisplayed(enabled);
                    rc.south.el.setDisplayed(enabled);
                    rc.corner.el.setDisplayed(enabled);
                }
            };

            var setResizableEnabledByID = function (ResizableControlID, enabled) {
                    var rc = window[ResizableControlID];
                    rc.east.el.setDisplayed(enabled);
                    rc.south.el.setDisplayed(enabled);
                    rc.corner.el.setDisplayed(enabled);
            };
        </script>
    </ext:ResourcePlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <ext:Store ID="Store1" runat="server">
    </ext:Store>
    <ext:Hidden ID="Hidden_ContainerName" runat="server">
    </ext:Hidden>
    <ext:Hidden ID="Hidden_PanelName" runat="server">
    </ext:Hidden>
    <ext:Hidden ID="Hidden_TableLayoutColumns" runat="server">
    </ext:Hidden>
    <ext:Hidden ID="Hidden_Mode" runat="server" Text="DesignMode">
    </ext:Hidden>
    <ext:Window ID="Window1" runat="server" Collapsible="false" Height="705" Icon="Application"
        Title="Title" Width="950" Padding="10" Hidden="true" Frame="true" Modal="true">
        <Items>
            <ext:TextField ID="TextField_Title" runat="server" FieldLabel="Title">
            </ext:TextField>
            <ext:NumberField ID="NumberField_Width" runat="server" FieldLabel="Width" MinValue="0"
                MaxValue="1000">
            </ext:NumberField>
            <ext:NumberField ID="NumberField_Height" runat="server" FieldLabel="Height" MinValue="0"
                MaxValue="1000">
            </ext:NumberField>
            <ext:TextField ID="TextField_ColSpan" runat="server" FieldLabel="ColSpan">
            </ext:TextField>
            <ext:TextField ID="TextField_RowSpan" runat="server" FieldLabel="RowSpan">
            </ext:TextField>
            <ext:TextField ID="TextField_Url" runat="server" FieldLabel="Url">
            </ext:TextField>
            <ext:Checkbox ID="Checkbox_Header" runat="server" Checked="true" FieldLabel="Header">
            </ext:Checkbox>
            <ext:Checkbox ID="Checkbox_Border" runat="server" Checked="true" FieldLabel="Border">
            </ext:Checkbox>
            <ext:Checkbox ID="Checkbox_Resizable" runat="server" Checked="true" FieldLabel="Resizable">
            </ext:Checkbox>
            <ext:Panel ID="Panel2" runat="server" Height="400" Layout="Fit" FieldLabel="HTML">
                <Content>
                    <FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server" Height="398" ToolbarSet="RedPanel"
                        Value="" HtmlEncodeOutput="true" EnableXHTML="true">
                    </FCKeditorV2:FCKeditor>
                </Content>
            </ext:Panel>
        </Items>
        <Buttons>
            <ext:Button ID="Button_ApplyChanges" runat="server" Text="Apply Changes">
                <Listeners>
                    <Click Handler="Button_ApplyChanges_Click();" />
                </Listeners>
            </ext:Button>
        </Buttons>
    </ext:Window>
    <ext:Window ID="Window_TableProperties" runat="server" Collapsible="false" Height="100"
        Icon="Application" Title="Table Properties" Width="270" Padding="10" Hidden="true"
        Frame="true" Modal="true">
        <Items>
            <ext:TextField ID="TextField_ColumnNumber" runat="server" FieldLabel="Column Number">
            </ext:TextField>
        </Items>
        <Buttons>
            <ext:Button ID="Button1" runat="server" Text="Apply Changes">
                <Listeners>
                    <Click Handler="Button_ApplyTableLayoutProperties_Click();" />
                </Listeners>
            </ext:Button>
        </Buttons>
    </ext:Window>
    <ext:Viewport ID="Viewport1" runat="server" Layout="fit">
        <Items>
            <ext:Panel ID="Panel9" runat="server" Layout="Fit" Region="Center" Title="Center"
                Header="false" Border="false" AutoScroll="true">
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:Button ID="Button_DesignMode" runat="server" Text="Design Mode">
                                <Listeners>
                                    <Click Handler="Button_DesignMode_Click();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="Button_ViewMode" runat="server" Text="View Mode">
                                <Listeners>
                                    <Click Handler="Button_ViewMode_Click();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="Button222" runat="server" Text="Disable all">
                                <Listeners>
                                    <Click Handler="setResizableEnabled(false);" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="Button333" runat="server" Text="Enable all">
                                <Listeners>
                                    <Click Handler="setResizableEnabled(true);" />
                                </Listeners>
                            </ext:Button>
                            <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                            <ext:Button ID="Button_AddNewColumn" runat="server" Text="Add New Cell">
                                <Listeners>
                                    <Click Handler="Button_AddNewCell_Click();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="Button_TableLayoutProperties" runat="server" Text="Table Properties">
                                <Listeners>
                                    <Click Handler="Button_TableLayoutProperties_Click();" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:TableLayout ID="TableLayout1" runat="server" Columns="2">
                        <Cells>
                            <ext:Cell>
                                <ext:Container ID="Container1" runat="server" Cls="dropable" Layout="Fit" Width="200"
                                    Height="200">
                                    <Items>
                                        <ext:Panel ID="pnl1" runat="server" Cls="draggable" Frame="false" StyleSpec="padding: 5px;"
                                            Title="Panel 1">
                                            <Tools>
                                                <ext:Tool Type="Gear" Handler="ShowWindow(#{pnl1});" />
                                            </Tools>
                                        </ext:Panel>
                                    </Items>
                                </ext:Container>
                            </ext:Cell>
                            <ext:Cell>
                                <ext:Container ID="Container2" runat="server" Cls="dropable" Layout="Fit" Width="200"
                                    Height="200">
                                    <Items>
                                        <ext:Panel ID="pnl2" runat="server" Cls="draggable" Frame="false" StyleSpec="padding: 5px;"
                                            Title="Panel 2">
                                            <Tools>
                                                <ext:Tool Type="Gear" Handler="ShowWindow(#{pnl2});" />
                                            </Tools>
                                        </ext:Panel>
                                    </Items>
                                </ext:Container>
                            </ext:Cell>
                            <ext:Cell ColSpan="2">
                                <ext:Container ID="Container3" runat="server" Cls="dropable" Layout="Fit" Width="200"
                                    Height="200">
                                    <Items>
                                        <ext:Panel ID="pnl3" runat="server" Cls="draggable" Frame="false" StyleSpec="padding: 5px"
                                            Title="Panel 3">
                                            <AutoLoad Url="http://www.google.com">
                                            </AutoLoad>
                                            <Tools>
                                                <ext:Tool Type="Gear" Handler="ShowWindow(#{pnl3});" />
                                            </Tools>
                                        </ext:Panel>
                                    </Items>
                                </ext:Container>
                            </ext:Cell>
                        </Cells>
                    </ext:TableLayout>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    <ext:DropTarget ID="DropTarget1" runat="server" Target="${.dropable}" Group="panelDD"
        OverClass="invite">
        <NotifyDrop Fn="notifyDrop" />
        <NotifyOut Handler="this.el.removeClass('invite');" />
        <NotifyOver Handler="Ext.select('.dropable').removeClass('invite'); this.el.addClass('invite');" />
    </ext:DropTarget>
    <ext:Resizable ID="Container1_resizable" runat="server" Element="={#{Container1}.el}"
        Transparent="true">
        <Listeners>
            <Resize Handler="Resizable_Resize(#{Container1},width,height);" />
        </Listeners>
    </ext:Resizable>
    <ext:Resizable ID="Container2_resizable" runat="server" Element="={#{Container2}.el}"
        Transparent="true">
        <Listeners>
            <Resize Handler="Resizable_Resize(#{Container2},width,height);" />
        </Listeners>
    </ext:Resizable>
    <ext:Resizable ID="Container3_resizable" runat="server" Element="={#{Container3}.el}"
        Transparent="true">
        <Listeners>
            <Resize Handler="Resizable_Resize(#{Container3},width,height);" />
        </Listeners>
    </ext:Resizable>
    </form>
</body>
</html>
  8. #8
    Jan 20, 2011, 3:03 PM
    Hi,

    As I mentioned it depends from browser. Some browsers can return script, other browsers don't
    Also (if you play with my sample) it depends from content which you set to innerHTML, in some cases browser doesn't return script also

    IMHO you never should read applied html back from innerHTML, after applying changes you have to save it in DB and read the html back from DB when it is required.

    Reading back from innerHTML is not good idea because it is not cross browser solution (return value from innerHTML doesn't equal input html on 100% )
  9. #9
    Jan 20, 2011, 3:54 PM
    Ok. I understood. Thank you very much. Problem is solved.

Similar Threads

  1. Set Panel HTML propertie in Javascript part
    By OCaglayan in forum 2.x Help
    Replies: 1
    Last Post: Jul 18, 2012, 10:55 PM
  2. Panel initially hidden doesn't show toolbar when shown
    By paul-2011 in forum 1.x Help
    Replies: 8
    Last Post: Apr 14, 2011, 4:20 PM
  3. [CLOSED] how to set panel html property as javascript property
    By kenanhancer in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Jan 05, 2011, 6:45 PM
  4. [1.0] AutoResize panel when html property changes
    By plykkegaard in forum 1.x Help
    Replies: 2
    Last Post: Sep 09, 2010, 8:31 PM
  5. [CLOSED] Add html table to panel in javascript
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Apr 03, 2009, 6:07 AM

Tags for this Thread

Posting Permissions