Extjs Carousel

Estoy trabajando con Extjs para mis trabajos de la universidad y encontré una forma de presentar imágenes o divs (que contienen cualquiercosa), de una manera muy agradable.

La extensión se llama carousel y esta disponible en:

http://www.extjs.com/learn/Extension:Image_Carousel

y el ejemplo en:

http://www.extjs.com/playpen/ext-core-latest/examples/carousel/

yo lo organice de la forma en que están los ejemplos de Extjs que me gusta mucho y lo tengo publicado en el siguiente enlace.

descarga aquí el carousel.

un ejemplo para agregar imágenes dinamicamente:

var carouselpanel = new Ext.Panel({

title: 'titulo panel',

boxMaxHeight: 465,

boxMaxWidth: 700,

style: 'margin:0 auto 0 auto;',

footer: false

});

var imagenes_template = new Ext.Template(

'aqui creo el div como todos lo sabemos hacer con el id donde el carousel se va a renderizar, también se puede agregar de una vez imágenes'

///no pude poner el codigo todavia no se publicar codigo :'(

);

carouselpanel.add( imagenes_template );

carouselpanel.doLayout( true, true );

var imagenes_carousel = new Ext.ux.Carousel(

'imagenes_div',

{

itemSelector: 'img',

interval: 10,

autoPlay: true,

showPlayButton: true,

pauseOnNavigate: true,

freezeOnHover: true,

transitionType: 'fade',

navigationOnHover: false,

width: 650,

height: 460

}

);

para quitar las imágenes actuales:

imagenes_carousel.clear();

para agregarlas dinamicamente:

var img = document.createElement('img');

img.src = 'url_imagen';

img.title = 'nombre_imagen';

img.setAttribute('style', 'width:300px; height:300px');

imagenes_carousel.add(img, true);

imagenes_carousel.play();

por si alguien no sabe agregar el carousel:

type="text/javascript" src=".../carousel/carousel.js" ///script

rel="stylesheet" type="text/css" media="screen" href=".../carousel/css/carousel.css" ///css

espero les sea de ayuda.