-
12 Nov 2009 8:36 AM #1
gxt carousel
gxt carousel
Hi
I'm trying to create a carousel component with a ListView as mentioned here:
http://www.extjs.com/forum/showthread.php?t=84055
My questions are:
- how to display the list horizontally ?
- how to remove the scrollbar ?
Thanks for yours anwsers.
Here's my code:
Code:public class CarouselPanel extends HorizontalPanel { public CarouselPanel() { setBorders(true); ListStore<CarouselModel> store = new ListStore<CarouselModel>(); store.add(new CarouselModel("/images/shortcuts/ark.png")); store.add(new CarouselModel("/images/shortcuts/ark.png")); store.add(new CarouselModel("/images/shortcuts/ark.png")); final ListView<CarouselModel> lv = new ListView<CarouselModel>(); lv.setStore(store); lv.setSimpleTemplate("<img src='{image}' border='1'/>"); lv.setPosition(10, 10); lv.setSize(160, 60); Button left = new Button("<"); left.addListener(Events.OnClick, new Listener<ButtonEvent>() { public void handleEvent(ButtonEvent be) { lv.moveSelectedDown(); } }); Button right = new Button(">"); right.addListener(Events.OnClick, new Listener<ButtonEvent>() { public void handleEvent(ButtonEvent be) { lv.moveSelectedUp(); } }); add(left); add(lv); add(right); } private class CarouselModel extends BaseModel implements Serializable { private static final long serialVersionUID = 1L; public CarouselModel(String image) { set("image", image); } } }
-
13 Nov 2009 5:13 AM #2
a) i test your example and it dont move to the next/prev picture :-(
b) a pic should be sized to a given size - so that also bigger and smaller pics fit into the caroussel
c) the panel should be more generic, so that you can attach any BaseModel and give the columnname for the url and maybe some name (or template) for the title etc.
your question:
1) horizontaly
maybe you get this with more css magic. see here the listview example:
http://www.extjs.com/examples/explorer.html#listview
PS:
a google search for exjts carousel give me also this threads. maybe you find there more hints how to do this as widget :-)
http://www.yui-ext.com/forum/showthread.php?t=80879
http://www.extjs.com/playpen/ext-core-latest/examples/carousel/
https://www.extjs.com/forum/showthread.php?t=47672
http://www.extjs.com/learn/Extension:Image_CarouselThis forum needs your help: you got hints from the community and now you have fixed your code? dont just reply with "now its fixed" or "i found the error"! please take the time to post also an detailed answer with the working code.
GreaseMonkey Script for a GXT-only Forum: it hides ExtJs here: New Posts • Search Results • Advanced Search form • Category overview http://www.extjs.com/forum/showthrea...041#post410041


Reply With Quote