PDA

View Full Version : [CLOSED] Carousel



cwolcott
Feb 26, 2015, 2:45 AM
Has anybody done any additional work with Carousel in v2. I looked back at a thread from v1.2 days:

http://forums.ext.net/showthread.php?13508-Carousel/page2.

It doesn't run in v2 and I was trying to save some time before I tried to put something together.

Daniil
Feb 26, 2015, 6:36 AM
Hi Chris,

Unfortunately, there is still no Carousel component in Ext.NET.

These posts might be helpful as well:
http://forums.ext.net/showthread.php?15700&p=66306&viewfull=1#post66306
http://forums.ext.net/showthread.php?19262&p=83479&viewfull=1#post83479

cwolcott
Feb 26, 2015, 12:00 PM
Is there anyway to get the following example working under v2.

http://forums.ext.net/showthread.php?19262&p=83479&viewfull=1#post83479

I get the following error:

Uncaught Error: [Ext.createByAlias] Cannot create an instance of unrecognized alias: layout.mycard

Daniil
Feb 26, 2015, 12:42 PM
Hope this example helps. It doesn't create a new layout, but extends a CardLayout with a new .next() method.

Example

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

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
Ext.define("MyOverrides", {
override: "Ext.layout.CardLayout",

next: function() {
var oldCard = this.activeItem,
newCard = this.activeItem.next() || this.owner.items.getAt(0);

oldCard.el.slideOut("l", {
callback: function() {
newCard.el.slideIn("r");
this.setActiveItem(newCard);
},
scope: this
});
}
});
</script>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:Container
ID="ContainerMain"
runat="server"
Width="400"
Height="400"
Layout="CardLayout"
ActiveIndex="0">
<Items>
<ext:Container
runat="server"
Html="Card 1"
StyleSpec="background-color: yellow;" />
<ext:Container
runat="server"
Html="Card 2"
StyleSpec="background-color: green;" />
<ext:Container
runat="server"
Html="Card 3"
StyleSpec="background-color: blue;" />
</Items>
</ext:Container>

<ext:Button runat="server" Text="Next">
<Listeners>
<Click Handler="App.ContainerMain.layout.next();" Buffer="150" />
</Listeners>
</ext:Button>
</body>
</html>

cwolcott
Feb 27, 2015, 12:13 AM
Thanks for the updated example.

I added some eye candy and hardcoded 3 items to quickly get an idea of what it could look and feel like. Next step to work on:

Dynamically create the items (CardLayout items and bullet buttons)


Any thoughts or suggestions?



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

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
<style>
.wnSectionTitle {
font-size: 11px;
background-color: #B9FFB9;
text-align: center;
padding: 2px 2px 2px 2px;
height: 20px;
}

.wnSectionDate {
font-size: 11px;
background-color: #FFFFB7;
vertical-align: middle;
padding: 2px 2px 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.act iveItem) + 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) {
App.WhatsNewTaskManager.tasks[0].taskRunTime = new Date().getTime() + 2000;
var curIndex = App.WhatsNew.items.indexOf(App.WhatsNew.layout.act iveItem) + 1;
if (curIndex == index) return;

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 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">
<Items>
<ext:Panel runat="server" Layout="VBoxLayout" TagString="1">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Label runat="server" Html="<b>Title:</b> Math Test Posted" Icon="NewRed"
Cls="wnSectionTitle" />
<ext:Container runat="server" Flex="1" Cls="wnSectionText" Html="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." />
<ext:Label runat="server" Html="<b>Added:</b> February 25, 2015" Icon="Calendar"
Cls="wnSectionDate" />
</Items>
</ext:Panel>
<ext:Panel runat="server" Layout="VBoxLayout" TagString="2">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Label runat="server" Html="<b>Title:</b> Math Test Posted" Icon="NewRed" Cls="wnSectionTitle" />
<ext:Container runat="server" Flex="1" Cls="wnSectionText" Html="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." />
<ext:Label runat="server" Html="<b>Added:</b> February 25, 2015" Icon="Calendar"
Cls="wnSectionDate" />
</Items>
</ext:Panel>
<ext:Panel runat="server" Layout="VBoxLayout" TagString="3">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Label runat="server" Html="<b>Title:</b> Math Test Posted" Icon="NewRed" Cls="wnSectionTitle" />
<ext:Container runat="server" Flex="1" Cls="wnSectionText" Html="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." />
<ext:Label runat="server" Html="<b>Added:</b> February 25, 2015" Icon="Calendar"
Cls="wnSectionDate" />
</Items>
</ext:Panel>
</Items>
</ext:Panel>
<ext:Container 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"
Disabled="true">
<Listeners>
<Click Handler="App.WhatsNewTaskManager.startTask(0);" />
</Listeners>
</ext:Button>
<ext:Button ID="wnStopTask" runat="server" Icon="BulletStop" Flat="true" ToolTip="Stop"
Disabled="true">
<Listeners>
<Click Handler="App.WhatsNewTaskManager.stopTask(0);" />
</Listeners>
</ext:Button>
<ext:ToolbarFill runat="server" />
<ext:Button ID="wnCard1Btn" runat="server" Icon="BulletOrange" Flat="true">
<Listeners>
<Click Handler="App.WhatsNew.layout.card(1);" Buffer="150" />
</Listeners>
</ext:Button>
<ext:Button ID="wnCard2Btn" runat="server" Icon="BulletBlue" Flat="true">
<Listeners>
<Click Handler="App.WhatsNew.layout.card(2);" Buffer="150" />
</Listeners>
</ext:Button>
<ext:Button ID="wnCard3Btn" runat="server" Icon="BulletBlue" Flat="true">
<Listeners>
<Click Handler="App.WhatsNew.layout.card(3);" Buffer="150" />
</Listeners>
</ext:Button>
</Items>
</ext:Container>
</Items>
<Listeners>
<Render Handler="setWhatsNewTitle();" />
</Listeners>
<Bin>
<ext:TaskManager ID="WhatsNewTaskManager" runat="server" ClientIDMode="Static" AutoRunDelay="7000">
<Tasks>
<ext:Task TaskID="WhatsNewTask" Interval="7000" AutoRun="true"
OnStart="#{wnStartTask}.setDisabled(true);
#{wnStopTask}.setDisabled(false);"
OnStop="#{wnStartTask}.setDisabled(false);
#{wnStopTask}.setDisabled(true);">
<Listeners>
<Update Handler="App.WhatsNew.layout.next();" />
</Listeners>
</ext:Task>
</Tasks>
</ext:TaskManager>
</Bin>
</ext:Panel>
</body>
</html>

Daniil
Feb 27, 2015, 5:01 AM
Looks good!


Dynamically create the items (CardLayout items and bullet buttons)

This example might be helpful.
http://examples.ext.net/#/XRender/Basic/Add_Items

You can also do that via JavaScript.

cwolcott
Feb 28, 2015, 1:43 AM
Here is my final example. If you have any suggestions/comments please add to the thread. Go ahead and close the thread.

21961



<%@ 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.act iveItem) + 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.act iveItem) + 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>

matrixwebtech
Jul 09, 2015, 6:49 PM
Try to convert your dynamic Carousel from aspx to MVC almost done but not able to add items in button group , please have a look at this Post (http://forums.ext.net/showthread.php?59750-Carousel-in-MVC&p=273366#post273366) and if you have any suggestion please let me know.