PDA

View Full Version : [CLOSED] DataView template JS error when bound with data



cleve
Jun 07, 2012, 7:31 AM
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<List<string>>" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="/themes/shared.css" type="text/css" rel="stylesheet" />
<link href="/themes/icons.css" type="text/css" rel="stylesheet" />
</head>
<body id="theBody">
<ext:ResourceManager ID="theManager" runat="server"
IDMode="Inherit"
Theme="Default"
EnableViewState="false"
DisableViewState="true"
ShowWarningOnAjaxFailure="false" ScriptMode="Debug" />
<ext:Panel runat="server" Height="400" Width="400" Layout="FitLayout">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="AAA">
<Listeners>
<Click Handler="testFunc();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:DataView runat="server" ItemSelector="div">
<Store>
<ext:Store runat="server" ID="s" AutoLoad="false">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Start" IsComplex="true" />
<ext:ModelField Name="Connectors" IsComplex="true" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Tpl runat="server">
<Html>
<tpl for=".">
<tpl for="Connectors">
<div>{UniqueId}</div>
</tpl>
</tpl>
</Html>
</Tpl>
</ext:DataView>
</Items>
</ext:Panel>
<script language="javascript" type="text/javascript">
var testFunc = function () {
var store = <%= s.ClientID %>;
store.load();
}
</script>
<form runat="server" id="theForm" />
</body>
</html>
<script runat="server">
protected override void OnInit(EventArgs e)
{
List<object> data = new List<object>()
{
new
{
Start = new { UniqueId = Guid.Empty },
Connectors = new List<object>()
{
new {
UniqueId = Guid.Empty
},
new {
UniqueId = Guid.Empty
}
}
}
};
s.DataSource = data;
s.DataBind();

}
</script>



When clicking button "AAA", data is populated into store. Then error occurs (attached image), saying "InternalID" is missing.
Some findings: 1) Trimming "Connector" array into 1 element, works fine; 2) Removing itemSelector "div" with something else, works fine.
When inspecting the array index, it's out of bound. Please help...

Daniil
Jun 07, 2012, 9:35 AM
Hi,

Thanks for the report.

I have reported it to Sencha and will monitor it.
http://www.sencha.com/forum/showthread.php?191149&p=823866#post823866

Vladimir
Jun 07, 2012, 10:35 AM
1. Do not use such common ItemSelector, it is better to use like


ItemSelector="div.myitem"


2. Each item in the view must correspond record in the store. In your sample, you create items more than records. It is incorrect. Item element must wrap your Connectors

Please see modified sample


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

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="/themes/shared.css" type="text/css" rel="stylesheet" />
<link href="/themes/icons.css" type="text/css" rel="stylesheet" />
</head>
<body id="theBody">
<ext:ResourceManager ID="theManager" runat="server"
IDMode="Inherit"
Theme="Default"
EnableViewState="false"
DisableViewState="true"
ShowWarningOnAjaxFailure="false" ScriptMode="Debug" />
<ext:Panel runat="server" Height="400" Width="400" Layout="FitLayout">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="AAA">
<Listeners>
<Click Handler="testFunc();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:DataView runat="server" ItemSelector="div.myitem">
<Store>
<ext:Store runat="server" ID="s" AutoLoad="false">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Start" IsComplex="true" />
<ext:ModelField Name="Connectors" IsComplex="true" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Tpl runat="server">
<Html>
<tpl for=".">
<div class="myitem">
<tpl for="Connectors">
<div>{UniqueId}</div>
</tpl>
</div>
</tpl>
</Html>
</Tpl>
</ext:DataView>
</Items>
</ext:Panel>
<script language="javascript" type="text/javascript">
var testFunc = function () {
var store = <%= s.ClientID %>;
store.load();
}
</script>
<form runat="server" id="theForm" />
</body>
</html>
<script runat="server">
protected override void OnInit(EventArgs e)
{
List<object> data = new List<object>()
{
new
{
Start = new { UniqueId = Guid.Empty },
Connectors = new List<object>()
{
new {
UniqueId = Guid.Empty
},
new {
UniqueId = Guid.Empty
}
}
}
};
s.DataSource = data;
s.DataBind();

}
</script>


Here is the sample with same approach
http://examples2.ext.net/#/DataView/Advanced/Grouping/

cleve
Jun 07, 2012, 2:51 PM
Kewl. It all make sense now. Tks.