What's New?

[CLOSED] Reference main store RecordField from a <for> structure in a template

Page 1 of 2 12 LastLast
  1. #1
    Apr 18, 2012, 9:21 PM

    [CLOSED] Reference main store RecordField from a <for> structure in a template

    Hi.

    I have a GridPanel that has some complex Store structure.

    <ext:Store ID="Store1" runat="server" OnRefreshData="ActualizarCoberturas" >
                            <Reader>
                                <ext:JsonReader  IDProperty ="IndiceColeccion">
                                    <Fields>
                                        <ext:RecordField Name="Producto" IsComplex="true" />
                                        <ext:RecordField Name="ProductoNombre"  Mapping="Producto.Nombre" />
                                        <ext:RecordField Name="ProveedorNombre" ServerMapping="Producto.EmpresaLocal.Proveedor.Denominacion" />
                                        <ext:RecordField Name="FechaDesde" Type="Date" />
                                        <ext:RecordField Name="FechaHasta"  Type="Date" />
                                        <ext:RecordField Name="PaisOrigen"   IsComplex="true"/>
                                        <ext:RecordField Name="PaisOrigenNombre"   Mapping="PaisOrigen.Nombre"/>
                                         <ext:RecordField Name="PaisDestino"   IsComplex="true"/>
                                        <ext:RecordField Name="PaisDestinoNombre"   Mapping="PaisDestino.Nombre"/>
                                        <ext:RecordField Name="Vouchers" IsComplex="true" />
                                        <ext:RecordField Name="Contacto"   IsComplex="true"/>
                                        <ext:RecordField Name="ContactoNombre"  ServerMapping="Contacto.Nombre"/>
                                        <ext:RecordField Name="ContactoApellido"  ServerMapping="Contacto.Apellido"/>
                                        <ext:RecordField Name="ContactoTelefono"  ServerMapping="Contacto.Telefono"/>
                                        <ext:RecordField Name="ContactoEmail"  ServerMapping="Contacto.Email"/>
                                        <ext:RecordField Name="IndiceColeccion" />
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>
    I show the "Vouchers" manually in a template with RowExpander plugin. Each voucher has a Name, Surname, and CollectionIndex to be referenced. (IndiceColeccion)

    
<ext:RowExpander ExpandOnDblClick="false" ExpandOnEnter="false">
                            
                            <Template runat="server">
                                
                                <Html>
                                   <tpl for="Vouchers">
                                        <tpl if="[xindex]==1">
                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                            <tr>
                                                <td colspan="3" class="EncabezadoGrillaGeneral">Viajeros</td>
                                            </tr>
                                            <tr >
                                                <td class="EncabezadoGrillaParticular" style="width:40%;">Nombre</td>
                                                <td class="EncabezadoGrillaParticular" style="width:40%;">Apellido</td>
                                                <td class="EncabezadoGrillaParticular style="width:20%;"">&nbsp;</td>
                                            </tr>
                                        </tpl>
                                        <tr>
                                        <td class="CeldaViajeros">{AseguradoNombre}</td>
                                        <td class="CeldaViajeros">{AseguradoApellido}</td>
                                        <td class="CeldaViajeros"><a href="Javascript:EditarViajero({record.data.IndiceColeccion}, {IndiceColeccion});">Editar</a></td></tr>
                                        <tpl if="[xcount-xindex]==0">
                                            <tr><td colspan="3" style="height:8px;">&nbsp;</td></tr>
                                            </table>
                                        </tpl>
                                   </tpl>
                                    
                                </Html>
                            </Template>
                        </ext:RowExpander>
    The function "EditarViajero" expects two references. IndiceColeccion (collection index) of the "Cobertura" (Coverage, or package) that contains the Voucher to be edited, and IndiceColeccion of the Voucher itself.

    <a href="Javascript:EditarViajero({record.data.IndiceColeccion}, {IndiceColeccion});">Editar</a>
    The IndiceColeccion of the voucher is rendered well {IndiceColeccion}, but I don't know how to refer back data from the main Store (IndiceColeccion of the main items iterated by the grid). I tryed that {record.data.IndiceColeccion} without success. 'record' is not recognized.

    I hope I was clear.

    Thanks
    Regadrs
    Fernando
    Last edited by Daniil; Apr 20, 2012 at 12:40 PM. Reason: [CLOSED]
  2. #2
    Apr 19, 2012, 11:19 AM
    Hi,

    I think a single way to get a record is something like this:

    Example
    <%@ 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)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test1" },
                new object[] { "test2" },
                new object[] { "test3" }
            };
            store.DataBind();
        }
    }
</script>

<!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 onClick = function (grid, test) {
            var store = grid.getStore(),
                index = store.find("test", test);

            alert(index);
        };
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="test" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column Header="Test" DataIndex="test" />
            </Columns>
        </ColumnModel>
        <Plugins>
            <ext:RowExpander runat="server">
                <Template runat="server">
                    <Html>
                        <for tpl=".">
                            <a href="#" onclick="onClick(GridPanel1, '{test}')">{test}</a>
                        </for>
                    </Html>
                </Template>
            </ext:RowExpander>
        </Plugins>
    </ext:GridPanel>
</body>
</html>
  3. #3
    Apr 19, 2012, 12:12 PM
    By the way, so far there is
    IDProperty="IndiceColeccion"
    you can use the following:

    <a href="#" onclick="onClick(GridPanel1, '{IndiceColeccion}')">{test}</a>
    <script type="text/javascript">
    var onClick = function (grid, id) {
        var store = grid.getStore(),
            index = store.getById(id);
    };
</script>
  4. #4
    Apr 19, 2012, 1:28 PM
    Quote Originally Posted by Daniil View Post 
    <a href="#" onclick="onClick(GridPanel1, '{IndiceColeccion}')">{test}</a>
        var onClick = function (grid, id)
    Sorry, I think I was not clear about the scenario. I'll put it in some data scenario.

    Imagine I have two packages (insurance coverages) each one with it's own Index (I use it as an identifier since they may not yet in database thus I can't use regular 'Id' property). That Index represents its index inside the Packages Collection of the Sale object.
    Each package also have a collection of Travellers covered by the insurance. Once again, each traveller has its own Index to be indentified.

    Sale {Date:xx/xx/xx ; othe attributes...}
       Package1 {Index=0; Product='Some product'; StartDate='xx/xx/xx'; and so...}
                   Traveller1 {Index=0; Name='John'; and so...}
                   Traveller2 {Index=1; Name='Mary'; and so...}
                   Traveller3 {Index=2; Name='Michael'; and so...}
       Package2 {Index=1; Product='Some other product'; StartDate='xx/xx/xx'; and so...}
                   Traveller1 {Index=0; Name='Alice'; and so...}
                   Traveller2 {Index=1; Name='Bob'; and so...}
    The grid shows the list of packages, and each one renders with a <for> statement all the traveller of it.

    I need to send inside that <for> both the Indexes of the current Package and Traveller.

    You suggest to get the Index of the <for> statement (this will be the index of the traveller) and with it get from the grid by Id the Package, what is not possible cause that Index is not Package's index.

    For instance, to call Edit function to Edit traveller Bob, I'll have to send:

    EditTraveller(2 ,1)
    being the first the index of Bob inside the Package2, and the second, the index of Package2 inside the Sale.

    So, 
    EditTraveller(<Index of Package from the main store>, {Index})
    Thanks
    Regards
    Fernando
    Last edited by Daniil; Apr 19, 2012 at 6:14 PM. Reason: Please use [CODE] tags
  5. #5
    Apr 19, 2012, 6:18 PM
    Thanks for the clarification. The requirement looks clear now.

    But could you provide a sample to test with?
  6. #6
    Apr 19, 2012, 8:12 PM
    Yes Daniil
    Here it comes:

    Code behind (Sorry for the VB.NET I guess you hate)
    Imports Ext.Net
Partial Class TestNestedData
    Inherits System.Web.UI.Page


    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load


        If Not Ext.Net.X.IsAjaxRequest Then
            Dim mStore As Store = Me.GridPanel1.GetStore


            Dim mSale As New Sale With {.PurchaseDate = Now}


            Dim mPackage As Package = New Package
            mPackage.Name = "Package1"
            mPackage.AddTraveller(New Traveller With {.Name = "John"})
            mPackage.AddTraveller(New Traveller With {.Name = "Mary"})
            mPackage.AddTraveller(New Traveller With {.Name = "Michael"})


            mSale.AddPackage(mPackage)


            mPackage = New Package
            mPackage.Name = "Package2"
            mPackage.AddTraveller(New Traveller With {.Name = "Alice"})
            mPackage.AddTraveller(New Traveller With {.Name = "Bob"})


            mSale.AddPackage(mPackage)


            mStore.DataSource = mSale.Packages


            mStore.DataBind()
        End If


    End Sub
End Class


Public Class Sale


    Private mPackages As New List(Of Package)




    Private mDate As Date
    Public Property PurchaseDate() As Date
        Get
            Return mDate
        End Get
        Set(ByVal value As Date)
            mDate = value
        End Set
    End Property


    Public ReadOnly Property Packages() As List(Of Package)
        Get
            Return mPackages
        End Get
    End Property


    Public Sub AddPackage(ByVal pPachage As Package)


        pPachage.Index = mPackages.Count
        mPackages.Add(pPachage)


    End Sub


End Class




Public Class Package


    Private mTravellers As New List(Of Traveller)


    Private mIndex As Integer
    Public Property Index() As Integer
        Get
            Return mIndex
        End Get
        Set(ByVal value As Integer)
            mIndex = value
        End Set
    End Property




    Private mName As String
    Public Property Name() As String
        Get
            Return mName
        End Get
        Set(ByVal value As String)
            mName = value
        End Set
    End Property


    Public ReadOnly Property Travellers() As List(Of Traveller)
        Get
            Return mTravellers
        End Get
    End Property


    Public Sub AddTraveller(ByVal pTraveller As Traveller)


        pTraveller.Index = mTravellers.Count
        mTravellers.Add(pTraveller)


    End Sub


End Class


Public Class Traveller




    Private mIndex As Integer
    Public Property Index() As Integer
        Get
            Return mIndex
        End Get
        Set(ByVal value As Integer)
            mIndex = value
        End Set
    End Property




    Private mName As String
    Public Property Name() As String
        Get
            Return mName
        End Get
        Set(ByVal value As String)
            mName = value
        End Set
    End Property






End Class
    Aspx file

    
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestNestedData.aspx.vb"
    Inherits="TestNestedData" %>


<%@ 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 id="Head1" runat="server">
    <title>Ext.NET Example</title>


    <script type="text/javascript"> 
        function EditTraveller(pPackageId, pTravellerId)
        {
            alert('Traveller\'s Index is: ' + pTravellerId + ' , Package\'s Index is: ' + pPackageId + ' (but is not, its the same as Traveller\'s Index) ')
        
        }
    </script>


</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true" Width="300">
        <Store>
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:JsonReader IDProperty="Index">
                        <Fields>
                            <ext:RecordField Name="Name" />
                            <ext:RecordField Name="Travellers" IsComplex="true" />
                            <ext:RecordField Name="Index" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column Header="Package name" DataIndex="Name" Width="200" />
            </Columns>
        </ColumnModel>
        <Plugins>
            <ext:RowExpander ID="RowExpander1" runat="server">
                <Template ID="Template1" runat="server">
                    <Html>
                    <tpl for="Travellers">
                        <tpl if="[xindex]==1">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td colspan="3" style="font-weight:bold;">Travellers</td>
                            </tr>
                           
                        </tpl>
                        <tr>
                        <td>{Name}</td>
                        <!--HERE, THE FIRST INDEX SHOULD COME FROM THE MAIN STORE (PACKAGE'S INDEX)-->
                        <td><a href="Javascript:EditTraveller({Index}, {Index});">Edit traveller</a></td></tr> 
                        <tpl if="[xcount-xindex]==0">
                            <tr><td colspan="3" style="height:8px;">&nbsp;</td></tr>
                            </table>
                        </tpl>
                   </tpl>
                    </Html>
                </Template>
            </ext:RowExpander>
        </Plugins>
    </ext:GridPanel>
</body>
</html>
  7. #7
    Apr 19, 2012, 8:13 PM
    Be aware code parser added some garbage to the code 

    href="Javascript<b></b>:
  8. #8
    Apr 20, 2012, 9:48 AM
    Quote Originally Posted by FAS View Post
    Code behind (Sorry for the VB.NET I guess you hate)
    Actually, you are right, I don't like it so much, because sometimes I'm in trouble to make some simple thing. But, I think, it's just a wont.

    By the way, it would be helpful for us if you would place code behind directly on an ASPX page. Like this:

    Example
    <%@ Page Language="VB" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        'code
    End Sub
 
    Public Class Sale
        'code
    End Class
</script>

<!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">
   <%--markup--%>
</html>
    It would allow us to just copy, paste and run your code without editing.

    At the moment I was able to run your page and investigating.
  9. #9
    Apr 20, 2012, 9:55 AM
    The solution is:
    <a href="Javascript<b></b>:EditTraveller({[parent.Index]}, {Index});">Edit traveller</a>
    Please see "Execute arbitrary inline code with special built-in template variables":
    http://docs.sencha.com/ext-js/3-4/#!...od-constructor
  10. #10
    Apr 20, 2012, 9:56 AM
    Quote Originally Posted by FAS View Post
    Be aware code parser added some garbage to the code 

    href="Javascript<b></b>:
    Yes, it's a known issue, don't worry. The forums adds it and I don't know why and how to avoid it.
Page 1 of 2 12 LastLast

Similar Threads

  1. How to get RecordField Name in Store
    By kkp0633 in forum 1.x Help
    Replies: 2
    Last Post: Apr 12, 2012, 2:43 AM
  2. about store RecordField submit emptystring issue
    By new163_2 in forum 1.x Help
    Replies: 1
    Last Post: Jun 14, 2011, 1:53 PM
  3. How to get client reference on Store
    By boris in forum 1.x Help
    Replies: 31
    Last Post: May 27, 2011, 7:23 AM
  4. Store/RecordField with special characters
    By stu in forum 1.x Help
    Replies: 0
    Last Post: Jun 11, 2010, 2:04 AM
  5. ComboBox binding Store with Unicode Name RecordField
    By erinus in forum Bugs
    Replies: 0
    Last Post: Nov 25, 2009, 3:23 AM

Posting Permissions