What's New?

Add Ext JavaScript Component to Component

  1. #1
    Mar 10, 2010, 12:23 PM

    Add Ext JavaScript Component to Component

    You can add any client-side component to another Container (such as Panel) but calling the .add() function on the Container and passing in an instance of the new child component.

    This can be very helpful if you have a purely client-side ExtJS Component, such as some custom extension that might not be available yet as an server-side <ext:> Component.

    The following sample demonstrates a simple scenario of configuring an <ext:Panel>, then adding a client-side only new Ext.Panel() on initial page load.

    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" />
    
    <script type="text/javascript">
        Ext.onReady(function () {
            var form = new Ext.Panel({
                title   : "My Panel",
                border  : false,
                padding : 5,
                layout  : "form",
                items   : [{
                    xtype      : "textfield",
                    fieldLabel : "Name",
                    anchor     : "100%"
                }]
            });
            
            pnl.add(form);
            pnl.doLayout();
        });
    </script>
    
    <ext:Panel 
        ID="pnl" 
        runat="server"
        Title="Example" 
        Height="185" 
        Width="350" 
        Layout="fit"
        />
</form>
</body>
</html>
    The key to making the child Component render correctly is using the .add() function, and then call .doLayout() on the Parent Container.

    The call to .doLayout() will instruct the Container to recalculate the layout of its inner components.

    Hope this helps.

    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  2. #2
    Mar 10, 2010, 12:26 PM

    RE: Add Ext JavaScript Component to Component

    Here's the same sample, but now with the Ext.onReady <script> block added into the <head> of the Page.

    With this configuration we need to ensure the required .js files are loaded before the <script> block, so an <ext:ResourcePlaceHolder> is added to the <head>

    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>
    
    <ext:ResourcePlaceHolder runat="server" />
    
    <script type="text/javascript">
        Ext.onReady(function () {
            var form = new Ext.Panel({
                title   : "My Panel",
                border  : false,
                padding : 5,
                layout  : "form",
                items   : [{
                    xtype      : "textfield",
                    fieldLabel : "Name",
                    anchor     : "100%"
                }]
            });
            
            pnl.add(form);
            pnl.doLayout();
        });
    </script>
</head>
<body>
<form runat="server">
    <ext:ResourceManager runat="server" />
    
    <ext:Panel 
        ID="pnl" 
        runat="server"
        Title="Example" 
        Height="185" 
        Width="350" 
        Layout="fit"
        />
</form>
</body>
</html>
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Mar 10, 2010, 12:31 PM

    RE: Add Ext JavaScript Component to Component

    Here's a third slightly different option which includes the <script> block in the <head>, but without having to use the <ext:ResourcePlaceHolder>.

    A client-side instance of the <ext:Panel ID="Panel1"> is passed into the .addPanel function. This demonstrates a way to reuse of the .addPanel function with other Components.

    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>
    
    <script type="text/javascript">
        var addPanel = function (pnl) {
            var form = new Ext.Panel({
                title   : "My Panel",
                border  : false,
                padding : 5,
                layout  : "form",
                items   : [{
                    xtype      : "textfield",
                    fieldLabel : "Name",
                    anchor     : "100%"
                }]
            });
            
            pnl.add(form);
            pnl.doLayout();
        };
    </script>
</head>
<body>
<form runat="server">
    <ext:ResourceManager runat="server">
        <Listeners>
            <DocumentReady Handler="addPanel(Panel1);" />
        </Listeners>
    </ext:ResourceManager>
    
    <ext:Panel 
        ID="Panel1" 
        runat="server"
        Title="Example" 
        Height="185" 
        Width="350" 
        Layout="fit"
        />
</form>
</body>
</html>
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  4. #4
    Mar 10, 2010, 12:38 PM

    RE: Add Ext JavaScript Component to Component

    Here's a fourth option, and I think my favourite...

    The <BeforeRender> Listener of the <ext:Panel> is configured to fire the "addPanel" function. An instance of the <ext:Panel> is automatically passed as an argument to the .addPanel function, so explicitly passing "Panel1" as in the example above is not required.

    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>
    
    <script type="text/javascript">
        var addPanel = function (pnl) {
            var form = new Ext.Panel({
                title   : "My Panel",
                border  : false,
                padding : 5,
                layout  : "form",
                items   : [{
                    xtype      : "textfield",
                    fieldLabel : "Name",
                    anchor     : "100%"
                }]
            });
            
            pnl.add(form);
            pnl.doLayout();
        };
    </script>
</head>
<body>
<form runat="server">
    <ext:ResourceManager runat="server" />
    
    <ext:Panel 
        ID="Panel1" 
        runat="server"
        Title="Example" 
        Height="185" 
        Width="350" 
        Layout="fit">
        <Listeners>
            <BeforeRender Fn="addPanel" />
        </Listeners>    
    </ext:Panel>
</form>
</body>
</html>

    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter

Similar Threads

  1. [CLOSED] Creating a c# component that generates a JavaScript class
    By PLoch in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Aug 04, 2011, 5:11 PM
  2. Ext.Net and Calendar component
    By r_honey in forum Open Discussions
    Replies: 3
    Last Post: Dec 10, 2010, 8:28 PM
  3. Add asp component on ext:Panel
    By diegopaulin in forum 1.x Help
    Replies: 0
    Last Post: Feb 18, 2010, 8:10 AM
  4. [CLOSED] [component].Disabled = false is not the same as [component].Enabled = true
    By mblume in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 22, 2009, 7:38 AM

Posting Permissions