Please look at this example.
Example
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
private Ext.Net.Panel GetPanel(int index)
{
return new Ext.Net.Panel()
{
Title = "Panel " + index,
Items =
{
new TextField() { FieldLabel = "TextField1" },
new TextField() { FieldLabel = "TextField2" }
}
};
}
protected void NumberField1_IconClick(object sender, DirectEventArgs e)
{
int currentCount = int.Parse(e.ExtraParams["currentCount"]);
int neededCount = (int)this.NumberField1.Number;
int panelsToAdd = neededCount - currentCount;
if (panelsToAdd > 0)
{
for (int i = 1; i <= panelsToAdd; i++)
{
this.GetPanel(i + currentCount).AddTo(this.Window1);
}
}
else if (panelsToAdd < 0)
{
X.Js.Call("removeFrom", this.Window1.ConfigID, -panelsToAdd, currentCount);
}
this.Window1.Show();
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
<script>
var removeFrom = function (win, countToRemove, totalCount) {
win = App[win];
var items = win.items;
Ext.suspendLayouts();
for (var i = 1; i <= countToRemove; i++) {
win.remove(items.getAt(totalCount - i));
}
Ext.resumeLayouts(true);
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:NumberField ID="NumberField1" runat="server" Icon="Add">
<DirectEvents>
<IconClick OnEvent="NumberField1_IconClick">
<ExtraParams>
<ext:Parameter Name="currentCount" Value="App.Window1.items.getCount()" Mode="Raw" />
</ExtraParams>
</IconClick>
</DirectEvents>
</ext:NumberField>
<ext:Window
ID="Window1"
runat="server"
Width="300"
Height="300"
Hidden="true"
Layout="AccordionLayout" />
</form>
</body>
</html>