PDA

View Full Version : Ext.ux.layout.Carousel



SamuraiJack1
19 Sep 2008, 4:07 AM
Better to see it with your own eyes, instead of describing: )

Demo (http://extjs-ux.org/repo/authors/jerrybrown5/trunk/Ext/ux/layout/Carousel/Demo.html)

Published in the repository:
http://extjs-ux.org/docs/?class=Ext.ux.layout.Carousel

Author: Nigel White aka Animal; updated by Jerry Brown, published by SamuraiJack

Scorpie
19 Sep 2008, 4:29 AM
Better to see it with your own eyes, instead of describing: )

Demo (http://extjs-ux.org/repo/authors/jerrybrown5/trunk/Ext/ux/layout/Carousel/Demo.html)

Published in the repository:
http://extjs-ux.org/docs


Very nice ! Thank you for this!

moegal
19 Sep 2008, 10:58 AM
really nice!

Animal
19 Sep 2008, 10:57 PM
Does somone want to photoshop a decent scroller image icon to use in that?

Animal
19 Sep 2008, 10:58 PM
BTW, My real name is Nigel White. "Bagbourne" is just a joke name I picked for me email account ;)

jerrybrown5
20 Sep 2008, 12:12 AM
Your emails say the bagbournes. You are so so funny! Where did that come from? :)

BTW I updated the SVN

Cheers,
Jerry

jerrybrown5
20 Sep 2008, 12:21 AM
Does somone want to photoshop a decent scroller image icon to use in that?

Btw I could have my company's excellent web designer photoshop craft one with little notice. However, would this lock it in to a particular skin though?

Animal
20 Sep 2008, 1:11 AM
The name comes from a book I read years ago: http://www.hep.man.ac.uk/u/robin/htmls/hard.luck.html The name of a kindly matron who took care of the young boy in the story.

I think the layout needs a good image which is in keeping with at least the default Ext blue theme. If other themes are used, other scroll images will be needed, but the two images used really don't fit. I used them originally as a bodge because I can't make images - I don't have the software.

jerrybrown5
20 Sep 2008, 1:57 AM
Nige,
That is pretty cool. I just might check out that book. Maybe there is somebody that I know in it? :)

I'll ask her to take a look at it early next week. In the meantime send over any style ideas if you like a particular design.
Cheers,
Jerry

Manu Somolinos
23 Oct 2008, 10:01 AM
hi to all!!!

I love Carousel plugin!! it's fantastic but I have a little doubt... what should I do to add new items to the Carousel? can I add new images doing:



carousel.add({
title: "",
style: {
margin: '10px 10px 10px 10px'
},
width: 70,
html: "<img style='margin-left:10px' src='../images/example.gif'>"
});
I've tried that and Firebug said:


t[t.length - 1].edges is undefined
return t.length ? t[t.length - 1].edges.rightAnchor : 0;
Thanks in advance,

Manu

micahknox
3 Nov 2008, 8:48 AM
I too would like to know how to add a new image on the fly because I have tried using the "add" and "insert" methods and am getting a similar error as above.

Thanks.

Manu Somolinos
3 Nov 2008, 9:03 AM
hi micah!!

Finally I left my "Ext.ux.Carousel project", and I choose "data-view" example as an efective alternative... that was a pity (Carousel looks great), but "data-view" example costs 4 implementation hours and "Ext.ux.Carousel" have taken up to me many hours without successful results...

Have a look "data-view" example...

Bye

Ceeke
14 Nov 2008, 2:59 AM
Looks great :D
However, i have a small issue.



// image carousel
function carousel(nodeid){

node = Ext.getCmp('companyHomeTree').getNodeById(nodeid);
if (node == null) {
Ext.Msg.alert('Status', 'Select a folder to view the image carousel of it.');

}
else {
// get images of current workspace
var workspace = Ext.getCmp('companyHomeTree').getSelectionModel().select(node).attributes.id

//if the thumbs & images folder exists, show them
var conn = new Ext.data.Connection();
conn.request({
url: 'ui/folder/docs',
method: 'GET',
params: {
nodeId: workspace
},
success: function(responseObject){
var files = responseObject.responseText;
var files = Ext.util.JSON.decode(files);
var arrayFiles = files.rows;
var arrayImages = new Array();
var id = 0;

//filter only the images
for (i = 0; i < arrayFiles.length; i++) {
var type = arrayFiles[i].mimetype;

type = type.substring(0, 5);
if (type == "image") {
arrayImages[id] = {
title: arrayFiles[i].title,
height: 180,
style: {
margin: '0px 0px 5px 0px'
},
html: "<img src=http://localhost:8080" + arrayFiles[i].url + "' id='" +
arrayFiles[i].title +
"' height='150'>"
};
id++;
}
}

//test if image count > 0
if (arrayImages.length == 0) {
Ext.Msg.alert('Status', 'No images found to show in a carousel.');
}
else {
//send JSON string to image carousel
var imagesP = Ext.util.JSON.encode(arrayImages);

Ext.getCmp('centerViewTab').add({

title: 'Image Carousel',
id: workspace,
closable: true,
layout: 'border',
items: [{
region: 'center',
html: '<iframe id="iframe-' + workspace + '" style="width:100%;height:100%" frameborder="0" src=""></iframe>'
}, {
region: 'north',
layout: 'form',
height: 200,
items: {
xtype: 'fieldset',
layout: 'carousel',
imageHeight: 150,
anchor: '100%',
height: 200,
layoutConfig: {
pagedScroll: true,
scrollButtonPosition:'split'
},
items: eval(imagesP)
}
}, {
region: 'south',
height: 50,
html: '<div id="title"></div>'
}]
}).show();

for (i = 0; i < arrayImages.length; i++) {
Ext.fly(arrayImages[i].title).on('click', function(e, sender){
document.getElementById('iframe-' + workspace).src = sender.src;
document.getElementById('title').innerHTML = "filename: " + sender.id;
});
}

}
},
failure: function(){
Ext.Msg.alert('Status', 'Unable to show a carousel for this folder.');
}
});
}
}

Clicking on the image in the carousel shows the fullsize result beneath, however in IE6 I get a totally other result. It seems the images are loaded from top to bottom, instead left to right. (Probally some error on my side, the demo of the carousel works perfect in IE6 ;))

I've uploaded some screenshots.
http://users.telenet.be/c-dude/FF.png
http://users.telenet.be/c-dude/IE6.png

Anyway, great job done =D>

cesarwbr
28 Nov 2008, 8:18 AM
Hi,
I tried to do this with a DataView:


{
title: "Components",
layoutConfig: {
pagedScroll: true,
loopCount:1,
scrollButtonPosition:'split',
marginScrollButtons: 1
},
xtype: 'container',
autoEl: {},
layout: 'carousel',
items: viewComps,
autoShow: true
}
but it's working only with a don't set the pagedScroll, but it don't show the scroll animation. What can I do to work with this Carousel and a DataView. Is there an example?

cesarwbr
2 Dec 2008, 12:28 PM
Hi,
I tried to use my DataView but the carousel doesn't work. I think because the DataView is loaded after the carousel layout was rendered.... I tried force render the layout again after the DataView loaded with doLayout but it doesn't work.... What can I do?

jay@moduscreate.com
2 Dec 2008, 12:46 PM
This is a classic example of a kick ass ux!

cesarwbr
2 Dec 2008, 1:39 PM
hehehe
but when I resize, maximize or minimize the window the carousel layout start working. What is the event that the carousel fires when it happen?

incaic
4 Dec 2008, 3:12 AM
Great extension!

I'm using a DataView and add the x-carousel-item class in the template.
I added some logic to not add x-carousel-item within Ext.ux.layout.Carousel.js.
But, this broke pagedScroll. I wouldn't want to modify Carousel.js anymore.

Has anyone figured out a clean/elegant way to use a DataView with this great extension?

incaic
4 Dec 2008, 2:25 PM
I've got DataView working, with a few changes to Ext.ux.layout.Carousel.js.
The only caveat is that there can't be any html code around the <tpl> tags in the XTemplate. The template has to have <tpl> and </tpl> as the outermost tags.


1) Create a new config option. Added dataView: false, after the loopPictureDelay option


2) At the end of the renderItem function, change:



c.el.addClass('x-carousel-item');


to:



if(this.dataView) {
var h,t=c.el.dom.childNodes;
for (var i=0;i<t.length;i++) {
h = t[i];
h.setAttribute('class','x-carousel-item '+h.getAttribute('class'));
}
} else {
c.el.addClass('x-carousel-item');
}



3) In the setItemsEdges function, change:



var e = c.el;


to:



if (this.dataView) {
var e = Ext.get(this.strip.dom.childNodes[0].childNodes[i].id);
} else {
var e = c.el;
}



4) Search and replace everywhere (there are 4 places) you find:



var t = this.container.items.items;


with this:



if (this.dataView) {
var t = this.container.items.items[0].store.data.items;
} else {
var t = this.container.items.items;
}

incaic
4 Dec 2008, 2:51 PM
Final call looks like the following:



...
layout:'carousel'
,layoutConfig:{
...
,dataView:true
}
,items:myDataView
...

temporary
16 Dec 2008, 2:11 PM
Great stuff :-D

Is it possible to use this layout with standard Panels? I'd like to achieve the following:

Have an empty "space" where a user can add one or more boxes with search settings (every box has different search filters). I tried to do it the manual way - but if it works with this layout this would be great.

Hint: This is inspred by zimbra, which uses this for extended search (ses http://www.etomicmail.com/services/zimbra/images/search_builder.gif

Bye,
Stephan

temporary
16 Dec 2008, 3:29 PM
Ok, i tried it - works like a charm!

The only thing I'm missing - any hints on how to let the carousel items inherit the height of the carousel component itself?

fangzhouxing
16 Dec 2008, 7:40 PM
incaic,thank you! I've also got DataView working!

findajit
25 Mar 2009, 3:19 AM
Hi,

I am very new to Ext JS. I downloaded the carousel gallery code and made the change so auto-scroll the images in the gallery. To accomlish this, I am calling a JavaScript function, which I have added inside the CarouselLayout.js file, in setInterval() function. Now, if I have two galleries on my page, only the second gallery auto-scrolls. The first one does not auto-scroll. Is there something to do with the way setInterval() shall be used?

Regards
Ajit




Better to see it with your own eyes, instead of describing: )

Demo (http://extjs-ux.org/repo/authors/jerrybrown5/trunk/Ext/ux/layout/Carousel/Demo.html)

Published in the repository:
http://extjs-ux.org/docs/?class=Ext.ux.layout.Carousel

Author: Nigel White aka Animal; updated by Jerry Brown, published by SamuraiJack

SchattenMann
1 Mar 2010, 9:46 AM
any chance of this come to extjs 3.0?

cuz this is amazing! at the moment i can see that don't work with extjs3.0 (something like this.strip is undefinned - and indeed it is! also as soon as i add layout:'carousel' all my viewport is broken!)

i tried also using extjs 2.1 and it works flawless. my problem is that i need to add the items based on a request.

so i have my south region with a carousel layout and with no items. then i do something like



south.add({
title:'1',
html:'my image'
});


nothing "visual" happens and then i get a t.length is null... :/

any ideas?

tks

MrRoyce
3 Mar 2010, 9:13 PM
any chance of this come to extjs 3.0?



+1

Bucs
5 Mar 2010, 7:50 AM
+2

pfernandom
25 Apr 2010, 4:16 PM
If you want to add an image to the carousel, you need to have the photo in a <Image> tag of html.

then, you add it, by sending the id of the image to the method add:

<img id='photo0' src='album1/image.jpg' title='Test Images'>

Script:
Carousel.add("photo0");
Carousel.refresh();

ninoguba
30 Oct 2010, 9:03 AM
I used this extension with the latest ExtJS 3.x version and basically it works for the most part except for the following issues:

- scrollButtonPosition: 'split' doesnt work as expected. no matter what the left/right buttons still appear on the far right.

- In IE, the width of the container using the 'carousel' layout is so much wider than it needs to be that it displays the horizontal scrollbar and that if you scroll to the far right you will see the left/right scroll buttons leaving a wide empty space between the items contained in the container and the scroll buttons. This only happens in IE, the layout works as expected on FF and Chrome.

Anybody encountered these issues and found solutions? Please share. Thanks.