1. #1
    Ext User
    Join Date
    May 2008
    Posts
    2
    Vote Rating
    0
    superjames is on a distinguished road

      0  

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

  2. #2
    Ext User
    Join Date
    Sep 2008
    Location
    Germany
    Posts
    961
    Vote Rating
    1
    Arno.Nyhm is on a distinguished road

      0  

    Default


    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_Carousel
    This 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

Thread Participants: 1