Thumbnail gallery that setCard to fullsize

[Chromatik]

In this example I have 3 thumbnail images, that when clicked, slide to the card with it's fullsize equivalent with navigation to go to the next or previous cards.

A wise developer suggest I use xTemplate to handle this. Can someone explain how to do this or better yet revise my code below to make this more efficient/scalable?


Ext.setup({
onReady: function(){

var button1 = new Ext.Button({
iconCls: 'tmb one',
baseCls: '',
handler: function(){
carousel.setCard(1, { type: 'slide', diretion: 'up', duration : 500, cover: false });
}
});

var button2 = new Ext.Button({
iconCls: 'tmb two',
baseCls: '',
handler: function(){
carousel.setCard(2, { type: 'slide', direction: 'up', duration : 500, cover: false });
}
});

var button3 = new Ext.Button({
iconCls: 'tmb three',
baseCls: '',
handler: function(){
carousel.setCard(3, { type: 'slide', direction: 'up', duration : 500, cover: false });
}
});

var tmbGrid = new Ext.Panel({
layout: 'fit',
fullscreen: true,
monitorOrientation: true,
items: [{
items: [button1,button2,button3],
}]
});

var carousel = new Ext.Carousel({
monitorOrientation: true,
listeners: {
beforeorientationchange: function(){
this.getActiveItem().fireEvent( 'beforeorientationchange' );
},
orientationchange: function(){
this.getActiveItem().fireEvent( 'orientationchange' );
},
},
layout: 'fit',
fullscreen: true,
indicator: false,
items: [{
items: [tmbGrid],
},{
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
baseCls: 'navBar',
overlay: true,
items: [{
html: '<img src="img/close.png">',
baseCls: 'navClose',
style: 'opacity: 1;',
handler: function(){
carousel.setCard(0, { type: 'slide', direction: 'down', duration : 500, cover: false });
}
},{xtype: 'spacer'},{
html: '<img src="img/previous.png">',
baseCls: 'navPrevious',
disabled : true,
handler: function(){
carousel.prev({
type: 'slide',
direction: 'right'
});
}
},{
html: '<img src="img/next.png">',
baseCls: 'navNext',
handler: function(){
carousel.next({
type: 'slide',
direction: 'left'
});
}
},]
}],
scroll: 'vertical',
layout: 'hbox',
html: '<div id ="outerDiv" style=" width:100%; background-color:black; overflow:hidden;"><div id="p1"><img id="photo" width="100%"; style="padding:0px;" src="img/lg_one.jpg"></div></div>',
},{
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
baseCls: 'navBar',
overlay: true,
items: [{
html: '<img src="img/close.png">',
baseCls: 'navClose',
handler: function(){
carousel.setCard(0, { type: 'slide', direction: 'down', duration : 500, cover: false });
}
},{xtype: 'spacer'},{
html: '<img src="img/previous.png">',
baseCls: 'navPrevious',
disabled : false,
handler: function(){
carousel.prev({
type: 'slide',
direction: 'right'
});
}
},{
html: '<img src="img/next.png">',
baseCls: 'navNext',
handler: function(){
carousel.next({
type: 'slide',
direction: 'left'
});
}
},]
}],
scroll: 'vertical',
layout: 'hbox',
html: '<div id ="outerDiv" style=" width:100%; background-color:black; overflow:hidden;"><div id="p1"><img id="photo" width="100%"; style="padding:0px;" src="img/lg_two.jpg"></div></div>',
},{
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
baseCls: 'navBar',
overlay: true,
items: [{
html: '<img src="img/close.png">',
baseCls: 'navClose',
style: 'opacity: 1;',
handler: function(){
carousel.setCard(0, { type: 'slide', direction: 'down', duration : 500, cover: false });
}
},{xtype: 'spacer'},{
html: '<img src="img/previous.png">',
baseCls: 'navPrevious',
handler: function(){
carousel.prev({
type: 'slide',
direction: 'right'
});
}
},{
html: '<img src="img/next.png">',
baseCls: 'navNext',
disabled : true,
handler: function(){
carousel.next({
type: 'slide',
direction: 'left'
});
}
},]
}],
scroll: 'vertical',
layout: 'hbox',
html: '<div id ="outerDiv" style=" width:100%; background-color:black; overflow:hidden;"><div id="p1"><img id="photo" width="100%"; style="padding:0px;" src="img/lg_three.jpg"></div></div>',
}]
});

}
});

[Chromatik]

I revised my sample code.

[evant]

The list example uses XTemplates for formatting, in your case you'd probably want a DataView instead, the tpl is just used to specify the format for how each item in the store gets printed.

[Chromatik]

Thanks Evan, Can you provide a code snippet to illustrate? It would help me get started.

[evant]

The list example shows how to use a template.

[Chromatik]

Thanks, I'll check it out.

[Chromatik]

I get how the templates work now but I'm having difficulty creating the DataView from the list example, can you help?

Here's the stripped down list example with thumbnail images


Ext.setup({
onReady : function() {
Ext.regModel('Contact', {});

var groupingBase = {
tpl: '<tpl for="."><div class="contact">{image}</div></tpl>',

store: new Ext.data.Store({
model: 'Contact',

data: [
{image: '<img src="img/sm_one.png">'},
{image: '<img src="img/sm_two.png">'},
{image: '<img src="img/sm_three.png">'}
]
})
};

new Ext.List(Ext.apply(groupingBase)).show();
}

});