PDA

View Full Version : Scrolling Panel



jst4fun
13 May 2008, 10:28 PM
Hello all,
I got a panel which displays a set of 5 images horizontally. The image details are fetched from the database. So there could be more than 5 images to be displayed. So i thought of providing a scrolling button to left and right of the panel. On clicking on to one of the button should display the next 5 images in the store. Can this be implemented using ext? Is there any plugins or API for that or should i manually add two buttons with the text "<" and ">" so that on clicking to one of the button will query the database table and retrieve the next or previous 5 images in the list. What is the better method to accomplish such kind of functionality in an ext panel? Please Help. Thanks

catacaustic
13 May 2008, 10:34 PM
How you do this will depend on how you want to load these things. Do you want to only show 5 images at a time, or do you want to show them all, and scroll as required?

If you're only showing 5 images, then your idea of retrieving these from the server is probably the best.

If you'd prefer to show all of them at once and scroll through them, had a look at the Fx functions, mainly the Ext.Fx.shift (). I've used these for pretty much exactly the same thing, and it works great.

jst4fun
15 May 2008, 7:01 AM
Thanks Edmund. Well I didn't knew such a library exists for ext but I am confused on how to implement it. I feel it should work but the confusion is on how to attach it to a button and then on clicking on to it how to change the data displayed in the store. i am trying to figure it out. If you could provide some input on it I would be really grateful to you. Anyway thanks for your help once again..

catacaustic
15 May 2008, 2:01 PM
So which do you want to use?

If you're retrieving the details from the server, all you need to do is attach a listener to the button that loads the data store with the correct details.

If you're scrolling, set up a listener on the button that gets the element that you want to scroll, and applies the Fx methods to that element.