Add Ext JavaScript Component to Component

  1. #1

    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
  2. #2

    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
  3. #3

    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
  4. #4

    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

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, 6:11 PM
  2. Ext.Net and Calendar component
    By r_honey in forum Open Discussions
    Replies: 3
    Last Post: Dec 10, 2010, 9:28 PM
  3. Add asp component on ext:Panel
    By diegopaulin in forum 1.x Help
    Replies: 0
    Last Post: Feb 18, 2010, 9:10 AM
  4. Replies: 1
    Last Post: May 22, 2009, 8:38 AM
  5. Charting component
    By yarlenvas in forum Feature Requests
    Replies: 2
    Last Post: Jan 28, 2009, 4:23 PM

Posting Permissions