PDA

View Full Version : Cycler



PatrickS
16 Nov 2010, 10:48 AM
Hi,

I want to use a cycler. I tried to use the jquery cycler. I render a template with some foto's. I tried to start the cycler in the afterrender of the dataview, but that didn't work. Does anyone has any experience with the cycler or knows an extjs cycler?

Patrick


var inThePictureTpl = new Ext.XTemplate(
'<div class="inThePic" style="width:100%; text-align:center;">',
'<tpl for=".">',
'<div onclick="showDetails({ArticleID});" style="text-align: center;">',
'<img src="http://xxxxxxxxxxx/140/{PhotoID}.jpg" width="120" height="120" /><br />',
'{Description}<br />',
'<img src="/xxxxxxxxxxxxxx/rightarrow_orange.png" style="width: 24px; height: 24px;" /><a href="javascript:;">Details...</a>',
'</div>',
'</tpl>',
'</div>');

var inThePictureView = new Ext.DataView({
store: inThePictureGridStore,
tpl: inThePictureTpl,
renderTo:'InThePicture',
listeners:{
'afterrender':function(comp){
$('.inThePic').cycle({
delay: -4000,
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
}
}
});

PatrickS
17 Nov 2010, 12:39 AM
Hi,

I hope my question is clear. I really need this functionality. If there are any questions, please ask them.

Patrick

PatrickS
17 Nov 2010, 3:13 AM
Solved it ;)


function showInThePictureItems() {

var inThePictureGridStore = new Ext.data.DirectStore({
directFn: InThePicture.GetActiveInThePictureItems,
root: 'data',
idProperty: 'InThePictureID',
totalProperty: 'total',
fields: inThePictureRecord
});

inThePictureGridStore.load();

var inThePictureTpl = new Ext.XTemplate(
'<div id="inThePic" class="inThePic" style="width:100%; text-align:center;">',
'<tpl for=".">',
'<div onclick="showDetails({ArticleID});" style="text-align: center;display:none;" >',
'<img src="http://2.floraplanet.nl/Content/Photos/140/{PhotoID}.jpg" width="120" height="120" /><br />',
'{Description}<br />',
'<img src="/Content/Floraplanet/Images/rightarrow_orange.png" style="width: 24px; height: 24px;" /><a href="javascript:;">Details...</a>',
'</div>',
'</tpl>',
'</div>');

var inThePictureView = new Ext.DataView({
store: inThePictureGridStore,
tpl: inThePictureTpl,
renderTo: 'InThePicture'
});

cycleMe();
};

function cycleMe() {

//setTimeout("$('.inThePic').cycle({ delay: -4000, fx: 'fade'});", 2000);
if ( document.getElementById('inThePic') !== null)
{
$('.inThePic').cycle({
delay: 4000,
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
} else {
setTimeout("cycleMe()", 100);
}


};