PDA

View Full Version : [CLOSED] Rebuild accordion with dataviews



Arbee
Aug 08, 2014, 11:04 PM
Hi guys,

This has been bugging me for days.
IN the example, click on one of the two populate buttons and the accordion is generated perfectly. Close the window and click on the other button and it crashes. Not including the dataview causes everything to work.

There must be something that can clean the accordion and rebuild it in just one round trip.



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

<script runat="server">

public class Section
{
public int SectionId { get; set;}
public string Name { get; set;}
}

public class Photo
{
public int Id { get; set;}
public int SectionId { get; set;}
public string ThumbUrl { get; set;}
}

protected void Populate1(object sender, DirectEventArgs e)
{
populate(1, 10);
}

protected void Populate2(object sender, DirectEventArgs e)
{
populate(3, 8);
}


protected void GetPhotos(object sender, DirectEventArgs e)
{
stPhotos.DataSource = getPhotos();
stPhotos.DataBind();
}

private void populate(int from, int to)
{

targetSections.ClearContent();

foreach (var section in getSections(from, to))
{
var panel = new Ext.Net.Panel
{
ID = "S" + section.SectionId,
Title = section.Name,
AutoScroll = true
};

DataView view = new DataView
{
ID = "V" + section.SectionId,
AutoScroll = true,
ItemSelector = "div.sourcePhoto",
OverItemCls = "x-item-over",
SelectedItemCls = "x-item-selected",
StoreID = "stPhotos",
Tpl = new XTemplate
{
Html = "<tpl for='.'><div class='sourcePhoto'>{ThumbUrl}</div></tpl>"
}
};

panel.Items.Add(view);
targetSections.Items.Add(panel);
}

targetSections.UpdateContent();

wPhotos.Show();
}

private List<Section> getSections(int from, int to)
{
var newList = new List<Section>();

for(int i=from; i <= to; i++)
{
newList.Add(new Section { SectionId=i, Name=string.Format("Section {0}",i) } );
}
return newList;
}

private List<Photo> getPhotos()
{
var newList = new List<Photo>();

for (int i = 1; i <= 4; i++)
{
newList.Add(new Photo { Id=i, SectionId = i, ThumbUrl = string.Format("Thumb{0}.jpg", i) });
}
return newList;
}
</script>

<!DOCTYPE html>

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

<ext:Button ID="Button1" runat="server" Text="Populate 1-10" OnDirectClick="Populate1" />
<ext:Button ID="Button2" runat="server" Text="Populate 3-8" OnDirectClick="Populate2" />

<ext:Window ID="wPhotos" runat="server"
Title="Photos"
Hidden="True"
Width="890"
MinWidth="680"
Height="700"
MinHeight="620"
Layout="BorderLayout"
Modal="true">
<Loader runat="server" AutoLoad="false">
<LoadMask ShowMask="true" Msg="Checking for photos..." />
</Loader>
<Bin>
<ext:Store
ID="stPhotos" runat="server">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="ThumbUrl" Type="String" />
<ext:ModelField Name="SectionId" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Bin>
<Items>
<ext:Panel ID="targetSections" runat="server"
AnchorHorizontal="100%"
AutoScroll="True"
Collapsible="False"
Layout="AccordionLayout"
MarginSpec="0 0 10 0"
Padding="0"
Region="East"
Width="355">
</ext:Panel>
</Items>
<DirectEvents>
<Show OnEvent="GetPhotos" />
</DirectEvents>
</ext:Window>
</form>
</body>
</html>

Daniil
Aug 10, 2014, 2:03 PM
Hi @Arbee,

Please set AutoDestroy="false" for the Store.

Otherwise it is being destroyed with a DataView.

Arbee
Aug 11, 2014, 9:52 PM
Thanks Daniil.
That sorted it.