PDA

View Full Version : [CLOSED] Complex form in list



WDewispelaere
Nov 20, 2013, 3:19 PM
Hello,

I'm trying to resolve the following requirement:
I need a complex form which will be repeated in some sort of a list view. Each "entry" must be editable at any time.
I looked into DataView with a ComponentView, which solves the issue for the basic cases, however i will also need to place some usercontrols with complex behaviour and DirectMethod calls on each of these forms. Some of these usercontrols are already built and used elsewhere in the app, so of course I would like to reuse these. It appears to me ComponentView does not support this.

I was wondering what would be the best approach for solving this case.
I hope i don't have to resort to a list of iframes hosting the individual formentries.

Baidaly
Nov 20, 2013, 8:59 PM
Hello!

You can put a Panel with a loader inside of ComponentView. Take a look at the sample below. And to use DirectMethods of UserControls look at this example: http://examples2.ext.net/#/Events/DirectMethods/UserControls/

Default.aspx


<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if(!X.IsAjaxRequest)
{
Store1.Data = new List<object>
{
new { Directory = "Folder1", Files = new List<object>{
new {file = "CV.doc"},
new {file = "readme.txt"},
}},

new { Directory = "Folder2", Files = new List<object>{
new {file = "Salary.xls"},
new {file = "RealSalary.xls"},
new {file = "readme.txt"},
}},

new { Directory = "Folder3", Files = new List<object>{
new {file = "About.pdf"}
}}
};
}
}
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:Panel ID="Panel1" runat="server"
Title="Inject by Selector"
Width="350"
Layout="FitLayout">
<Items>
<ext:DataView ID="DataView1" runat="server" Padding="6">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Directory" />
<ext:ModelField Name="Files" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ItemTpl>
<Html>
<div>Files of {Directory}</div>
<tpl for="Files">
<div class="file-button" file="{file}"></div>
</tpl>
<br />
</Html>
</ItemTpl>
<Plugins>
<ext:ComponentView ID="ComponentView1" runat="server">
<Items>
<ext:ViewItem Selector="div.file-button">
<Component>
<ext:Panel ID="Panel2" runat="server" Title="Title">
<Loader ID="Loader1" runat="server" Url="Child.aspx" Mode="Html">
<LoadMask ShowMask="true" />
</Loader>
</ext:Panel>
</Component>
</ext:ViewItem>
</Items>
<Listeners>
<BeforeComponentBind Handler="component.text = target.getAttribute('file');" />
</Listeners>
</ext:ComponentView>
</Plugins>
</ext:DataView>
</Items>
</ext:Panel>
</form>
</body>
</html>


Child.aspx

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Child Page - Ext.NET Examples</title>
</head>
<body>
<%= DateTime.Now.ToLongTimeString() %>
</body>
</html>