PDA

View Full Version : gxt carousel



superjames
12 Nov 2009, 8:36 AM
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:



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);
}
}
}

Arno.Nyhm
13 Nov 2009, 5:13 AM
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/ (http://www.extjs.com/forum/../playpen/ext-core-latest/examples/carousel/)

https://www.extjs.com/forum/showthread.php?t=47672

http://www.extjs.com/learn/Extension:Image_Carousel (http://www.extjs.com/forum/../learn/Extension:Image_Carousel)