[CLOSED] how to set panel html property as javascript property

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] how to set panel html property as javascript property

    Hi, I try to set Panel Html property with javascript code. Below codes are sample for my scenario. If I set html property as standart html code, It works. But, If I set html property as javascript, it doesn't work. What should I do?

            [DirectMethod]
            public void Button1_Click()
            {
                string html = @"    Ext.onReady(function() {
    var window1 = new Ext.Window({
                id: 'Window1',
                title: 'Fatura Elektronike',
                html: <iframe src='http://www.google.com' width='100%' height='100%' frameborder='0'></iframe>,
                frame: true,
                modal: true,
                resizable:false,
                draggable: false,
                closeAction: 'hide',
                width: 950,
                height: 775,
                y:10,
                border: true
            });
            window1.show();
    });";
    
                Panel1.Html = html;
            }
    
    ----------------------------------------------------------------------------------------------------------------------
    
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="WebApplication9.WebForm4" %>
    
    <%@ 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>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server">
            <script type="text/javascript">
                function Button1_Click() {
                    Ext.net.DirectMethods.Button1_Click();
                }
            </script>
        </ext:ResourcePlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server">
        </ext:ResourceManager>
    
        <ext:Panel ID="Panel1" runat="server" Height="300" Title="Title">
            <Buttons>
                <ext:Button ID="Button1" runat="server" Text="Apply Changes">
                    <Listeners>
                        <Click Handler="Button1_Click();" />
                    </Listeners>
                </ext:Button>
            </Buttons>
        </ext:Panel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Jan 05, 2011 at 6:46 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Not sure what you are trying to achieve...

    Would like to load a frame in a Panel?
  3. #3
    Actually, I try to achieve like a content management software. Users should be able to insert html and javascript codes. So, can you give me a sample. normally, I have to add javascript files or style files to javascript codes. But, I already use extjs codes. So, what should I do?
  4. #4
    Well, here is very simple example how you can set Panel's html via JavaScript using .update() method.

    Example
    <%@ 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>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Panel 
            ID="Panel1" 
            runat="server"
            Title="Test panel" 
            Html="Type something in TextArea and click button" />
        <ext:TextArea ID="TextArea1" runat="server" />
        <ext:Button runat="server" Text="Update">
            <Listeners>
                <Click Handler="Panel1.update(TextArea1.getValue(), true);" />
            </Listeners>
        </ext:Button>
        </form>
    </body>
    </html>
    See also
    http://dev.sencha.com/deploy/dev/doc...&member=update
  5. #5
    I tried that code with below code. But, it didn't work or I make something wrong. Can you please check with this javascript code.

            [DirectMethod]
            public void Button1_Click()
            {
                string html = @"
    var window1 = new Ext.Window({
                id: 'Window1',
                title: 'Fatura Elektronike',
                html: 'Hello World',
                frame: true,
                modal: true,
                resizable:false,
                draggable: false,
                closeAction: 'hide',
                width: 950,
                height: 775,
                y:10,
                border: true
            });
            window1.show();";
                Panel1.Update(Server.HtmlEncode(html), true);
                //Panel1.Html = html;
            }
  6. #6
    Would you like to get Window as a content of Panel? Not sure how it should looks...

    Or do you want to just create a Window?
  7. #7
    I don't know which scenario will be used for html or javascript. So, Persons that will use this software can add javascript codes. And this code was used in our old system so I give this example. Shortly, I have to consider every scenario.
  8. #8
    Hi,

    1. You have to wrap javascript code by script tags
    2. Many browser doesn't allow inject script inside DOM. For example, try to execute the following javascript code in the browser
    document.getElementById('myDivId').innerHTML = "<script type='text/javascript'>alert('hi');</script>";
    You will not see alert dialog
    Therefore adding javascript code to the Html have no sence during ajax request. It is required manually execute javascript code using 'eval' function
  9. #9
    Previous code works. But, I tried below code. My scenario is that Panel1 will show other panel(myPanel variable). Can you please help me?

            [DirectMethod]
            public void Button1_Click()
            {
                string html = @"
    <script type='text/javascript'>
    var myPanel = new Ext.Panel({
        width: '200',
        height: '100',
        frame: true,
        title: 'Title',
        html: 'Kenan Hancer'
    });
    </script>";
                Panel1.Update(html, true);
                //Panel1.Html = html;
            }
  10. #10
    Hi,

    Yes, 'update' method allows inject script because it manually parse content, extract and executes scripts
    Regarding panel rendering, you have to define 'renderTo' option, like
    renderTo : Panel1.body
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 2
    Last Post: Nov 03, 2011, 5:24 PM
  2. [CLOSED] Panel HTML property doesn't show JavaScript
    By kenanhancer in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Jan 20, 2011, 3:54 PM
  3. Replies: 2
    Last Post: Sep 29, 2010, 8:51 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] HTMl editor Readonly property...
    By speedstepmem2 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 05, 2009, 4:41 AM

Posting Permissions