Here is my final example. If you have any suggestions/comments please add to the thread. Go ahead and close the thread.
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
public class WhatNewItem
{
public string TitleIcon { get; set; }
public string TitlePrefix { get; set; }
public string Title { get; set; }
public DateTime StartDate { get; set; }
public string Link { get; set; }
public string Description { get; set; }
public string Notes { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
rm.RegisterIcon(Icon.NewRed);
rm.RegisterIcon(Icon.Note);
List<WhatNewItem> items = GetData();
int index = 0;
foreach (WhatNewItem data in items)
{
index++;
Ext.Net.Panel card = new Ext.Net.Panel { Layout = "VboxLayout", TagString = index.ToString(), LayoutConfig = { new VBoxLayoutConfig { Align = VBoxAlign.Stretch } } };
Container topSection = new Container { Layout = "HboxLayout", Cls = "wnTopSection" };
card.Items.Add(topSection);
Ext.Net.Label title = new Ext.Net.Label { Html = data.TitlePrefix + data.Title, IconCls = data.TitleIcon, Cls = "wnTopSectionTitle", Flex = 1 };
topSection.Items.Add(title);
Ext.Net.Label date = new Ext.Net.Label { Html = data.StartDate.ToString("MMM dd, yyyy"), Cls = "wnTopSectionDate" };
topSection.Items.Add(date);
Ext.Net.Container desc = new Ext.Net.Container { Html = data.Description, Cls = "wnSectionText", Flex = 1 };
card.Items.Add(desc);
if (!String.IsNullOrEmpty(data.Notes))
{
Ext.Net.Label note = new Ext.Net.Label { Html = data.Notes, Icon = Icon.Note, Cls = "wnBottomSectionNote" };
card.Items.Add(note);
};
WhatsNew.Items.Add(card);
Ext.Net.Button button = new Ext.Net.Button { ID = String.Format("wnCard{0}Btn", index), Icon = (index == 1) ? Ext.Net.Icon.BulletOrange : Ext.Net.Icon.BulletBlue, Flat = true };
button.ToolTip = data.Title;
button.Listeners.Click.Handler = String.Format("App.WhatsNew.layout.card({0});", index);
button.Listeners.Click.Buffer = 150;
wnButtonGroup.Items.Add(button);
};
WhatsNew.Title = String.Format("What's New ({0} of {1})", 1, items.Count());
}
private List<WhatNewItem> GetData()
{
List<WhatNewItem> data = new List<WhatNewItem>();
for (int i = 1; i <= 10; i++)
{
data.Add(new WhatNewItem
{
TitleIcon = "icon-newred",
TitlePrefix = "<b>Title:</b> ",
Title = i.ToString(),
StartDate = DateTime.Parse("2015-02-23"),
Link = "",
Description = "Calculus 101 mid-terms have been posted. The class average was 78%. If you have any questions about your grade please schedule an appointment with Prof. Baum by March 5th.",
Notes = (i % 2 == 0) ? "This is the notes section." : ""
});
}
return data;
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Carousel (Dynamic)</title>
<style>
.wnTopSection {
background-color: #B9FFB9;
padding: 0px 5px 2px 5px;
height: 20px;
}
.wnTopSectionTitle {
font-size: 11px;
text-align: left;
}
.wnTopSectionDate {
font-size: 10px;
text-align: right;
padding-top: 2px;
}
.wnBottomSectionNote {
font-size: 10px;
background-color: #FFFFB7;
text-align: left;
vertical-align: middle;
padding: 2px 5px 2px 2px;
height: 20px;
}
.wnSectionText {
padding: 5px 5px 5px 5px;
border: 1px solid gray;
}
</style>
<script>
setWhatsNewTitle = function () {
var index = App.WhatsNew.items.indexOf(App.WhatsNew.layout.activeItem) + 1;
App.WhatsNew.setTitle(Ext.String.format("What's New ({0} of {1})", index, App.WhatsNew.items.length));
};
assignBtnIcons = function (oldIndex, newIndex) {
var newBtn = Ext.getCmp(Ext.String.format('wnCard{0}Btn', newIndex));
newBtn.setIconCls('#BulletOrange');
if (oldIndex == 0) return;
var oldBtn = Ext.getCmp(Ext.String.format('wnCard{0}Btn', oldIndex));
oldBtn.setIconCls('#BulletBlue');
};
Ext.define("MyOverrides", {
override: "Ext.layout.CardLayout",
card: function (index) {
var curIndex = App.WhatsNew.items.indexOf(App.WhatsNew.layout.activeItem) + 1;
if (curIndex == index) return;
App.WhatsNewTaskManager.tasks[0].taskRunTime = new Date().getTime() + 2000;
var oldCard = this.activeItem,
newCard = this.owner.items.getAt(index - 1);
var oldSlideDir, newSlideDir;
if (curIndex < index) { oldSlideDir = "l"; newSlideDir = "r"; } else { oldSlideDir = "r"; newSlideDir = "l"; }
oldCard.el.slideOut(oldSlideDir, {
callback: function () {
newCard.el.slideIn(newSlideDir);
this.setActiveItem(newCard);
setWhatsNewTitle();
},
scope: this
});
assignBtnIcons(curIndex, index);
},
next: function () {
var oldCard = this.activeItem,
newCard = this.activeItem.next() || this.owner.items.getAt(0);
var curIndex = App.WhatsNew.items.indexOf(oldCard) + 1;
var newIndex = App.WhatsNew.items.indexOf(newCard) + 1;
oldCard.el.slideOut("l", {
callback: function () {
newCard.el.slideIn("r");
this.setActiveItem(newCard);
setWhatsNewTitle();
},
scope: this
});
assignBtnIcons(curIndex, newIndex);
},
previous: function () {
var oldCard = this.activeItem,
newCard = this.activeItem.prev() || this.owner.items.last();
var curIndex = App.WhatsNew.items.indexOf(oldCard) + 1;
var newIndex = App.WhatsNew.items.indexOf(newCard) + 1;
oldCard.el.slideOut("r", {
callback: function () {
newCard.el.slideIn("l");
this.setActiveItem(newCard);
setWhatsNewTitle();
},
scope: this
});
assignBtnIcons(curIndex, newIndex);
}
});
</script>
</head>
<body>
<ext:ResourceManager ID="rm" runat="server" />
<ext:Panel runat="server" Layout="VBoxLayout" Width="400" Height="200" Border="false">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" Padding="2" />
</LayoutConfig>
<Items>
<ext:Panel
ID="WhatsNew"
runat="server"
ClientIDMode="Static"
Layout="CardLayout"
Title="What's New"
TitleAlign="Center"
UI="Primary"
ActiveIndex="0"
Frame="true"
Flex="1" />
<ext:Container ID="wnButtonGroup" runat="server" Layout="HBoxLayout" Height="24">
<Defaults>
<ext:Parameter Name="Padding" Value="0" />
</Defaults>
<Items>
<ext:Button ID="wnStartTask" runat="server" Icon="BulletRight" Flat="true" ToolTip="Start"
Hidden="true">
<Listeners>
<Click Handler="App.WhatsNewTaskManager.startTask(0);" />
</Listeners>
</ext:Button>
<ext:Button ID="wnStopTask" runat="server" Icon="BulletStop" Flat="true" ToolTip="Stop"
Hidden="true">
<Listeners>
<Click Handler="App.WhatsNewTaskManager.stopTask(0);" />
</Listeners>
</ext:Button>
<ext:ToolbarFill runat="server" />
</Items>
</ext:Container>
</Items>
<Bin>
<ext:TaskManager ID="WhatsNewTaskManager" runat="server" ClientIDMode="Static" AutoRunDelay="7000">
<Tasks>
<ext:Task TaskID="WhatsNewTask" Interval="7000" AutoRun="true"
OnStart="if (App.WhatsNew.items.length <= 1) App.WhatsNewTaskManager.stopTask(0); else #{wnStartTask}.setVisible(false); App.wnStopTask.setVisible(true);"
OnStop="if (App.WhatsNew.items.length > 1) {#{wnStartTask}.setVisible(true); #{wnStopTask}.setVisible(false);}">
<Listeners>
<Update Handler="App.WhatsNew.layout.next();" />
</Listeners>
</ext:Task>
</Tasks>
</ext:TaskManager>
</Bin>
</ext:Panel>
</body>
</html>
