PDA

View Full Version : Image Slideshow in ExtJs without Using Carousel



JsNoob
28 Oct 2012, 11:19 PM
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
29 Oct 2012, 5:19 AM
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
29 Oct 2012, 5:37 PM
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
29 Oct 2012, 5:52 PM
JavaScript has a basic timer but you have to use bind because it doesn't support scope. I'd recommend using Ext.TaskMgr.

JsNoob
29 Oct 2012, 9:52 PM
Thanks bro it worked

Regards,
JsNoob

lucbinhdinh
17 Jan 2013, 12:21 AM
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
22 Jan 2013, 6:55 PM
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