Add Ext JavaScript Component to Component [Archive]

geoffrey.mcgill

Mar 10, 2010, 12:23 PM

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

Mar 10, 2010, 12:26 PM

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

Mar 10, 2010, 12:31 PM

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

Mar 10, 2010, 12:38 PM

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>