Image Slideshow in ExtJs without Using Carousel

[JsNoob]

Hi, is it possible to implement an image slideshow in ExtJS with the use of Ext Carousel.

I tried implementing it using dataview and templates, can you give me any suggestion to go about this?

Regards,
Jonas

[James Goddard]

Create a panel using tpl:

tpl: '<img class="your-styling" src="{url}" />'

Then setup a timer that when fired calls:

panel.update ({
url: newUrl
});

[JsNoob]

Hi James, I tried using your solution but I decided to use to use update html instead. My question to you is how can I setup a timer. so here is my code.

                    new Ext.Panel
                    ({
                        id: 'top_center_panel',
                        height: 175,
                        width: 616,
                        border: false,
                        html: '<img src="../pictures/online_store_banner.jpg" height = 175 width = 616>'
                    }),

here, I created a panel and inside this panel is a html config. So my main concern is how can I make the image change at a certain time. here is my code on changing the image.

                    Ext.getCmp('top_center_panel').update
                    ({
                        html: '<img src="../pictures/ducati848.jpg">'
                    });

Regards, JsNoob

[James Goddard]

JavaScript has a basic timer but you have to use bind because it doesn't support scope. I'd recommend using Ext.TaskMgr.

[JsNoob]

Thanks bro it worked

Regards,
JsNoob

[lucbinhdinh]

Ext.require('Ext.panel.Panel');
Ext.onReady(function() {
new Ext.Panel({
renderTo:'lay-out',
title: 'hinh anh',
items: [{
border: false,
html: "<img class='your-styling' src='2.ipg' with='200px' height='200px'/>",
//tpl: "<img class='your-styling' src='2.ipg' with='200px' height='200px' />",
xtype: "panel"}

]
});
});
no show image???/
why??
thanhks your!!!!!!!!!!!!!!!!!!!!!111

[JsNoob]

Ext.require('Ext.panel.Panel');
Ext.onReady(function() {
new Ext.Panel({
renderTo:'lay-out',
title: 'hinh anh',
items: [{
border: false,
html: "<img class='your-styling' src='2.ipg' with='200px' height='200px'/>",
//tpl: "<img class='your-styling' src='2.ipg' with='200px' height='200px' />",
xtype: "panel"}

]
});
});
no show image???/
why??
thanhks your!!!!!!!!!!!!!!!!!!!!!111

Hi Bro,

I think the browser could not detect your image, make sure the file path is correct. Also there is some error in your code. To fix this, you should remove xtype:"panel", because you already initialized new ext.panel, also you should change with=200 to width='200'. Hope it helps

Regards,
JsNoob