[CLOSED] DataView template JS error when bound with data

  1. #1

    [CLOSED] DataView template JS error when bound with data

    <%@ 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...
    Attached Thumbnails Click image for larger version. 

Name:	error.jpg 
Views:	115 
Size:	42.4 KB 
ID:	4336  
    Last edited by Daniil; Jun 07, 2012 at 2:22 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Thanks for the report.

    I have reported it to Sencha and will monitor it.
    http://www.sencha.com/forum/showthre...866#post823866
  3. #3
    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
    https://examples2.ext.net/#/DataView/Advanced/Grouping/
  4. #4
    Kewl. It all make sense now. Tks.

Similar Threads

  1. DataView Template Issues (bug?)
    By cleve in forum 2.x Help
    Replies: 4
    Last Post: Jun 07, 2012, 8:36 AM
  2. [CLOSED] Script into a DataView Template
    By FVNoel in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 10, 2012, 2:55 PM
  3. [CLOSED] [1.0] DataView Template Question
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Aug 08, 2010, 7:49 PM
  4. [CLOSED] DataView [0.8.1] The Template can't be empty
    By cobiscorp in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Jul 23, 2010, 5:04 PM
  5. Buttons in a DataView template?
    By shaun in forum 1.x Help
    Replies: 2
    Last Post: Aug 24, 2009, 3:11 AM

Posting Permissions