PDA

View Full Version : Making Carousel from JSON store.



arunc
7 Nov 2011, 2:26 AM
I want to make a carousel using data from the server.
I found an example for this at
http://stackoverflow.com/questions/7335192/sencha-touch-carousel-from-json-store
(http://stackoverflow.com/questions/7335192/sencha-touch-carousel-from-json-store)but it is using the sencha touch 1.

How to create a carousel from JSON store in sencha touch 2.

digeridoopoo
7 Nov 2011, 7:20 AM
I am also looking to do this...maybe a good idea would be for us to upload some examples to jsfiddle then some kind people might be able to point us in the right direction by changing the code?

In JSFiddle in the 'Add Resources box' paste in a link to a Sencha Touch 2 library and press the '+' button:

http://www.motion-creative.com/touch/sencha-touch2-all-debug.js

...and do it again for the .css file:

http://www.motion-creative.com/touch/sencha-touch2.css

I think this is all we would need to experiment online in JSFiddle? I will try and post a simple Sencha Touch 2 page example with carousel in 1 page soon.

:-)

mitchellsimoens
7 Nov 2011, 8:03 AM
All it is is loading a Store and when it returns with items (or removing/updating items) adding/removing items from the Carousel. Pretty simple stuff.

digeridoopoo
7 Nov 2011, 10:31 AM
That's true but I'm sure many people like me are taking a bit longer to understand the 'correct' way of laying things out and setting stuff up in Sencha Touch 2. So far there are not that many live examples to play with, only snippets of code...

oddz
7 Nov 2011, 11:09 AM
Due to an issue with store load methods firing multiple times the most concrete way is to pass the data directly to the component and manually rebuild it. The other thing to also watch out for is that carousels with no items in them produce errors. Taking that into account you should be able to look at the code below and apply the techniques to your specific case. Also, the indicator is being set to false, because there are some errors being produced when it exists. So my work around is to disable it.



Ext.define('Editorials.view.Gallery',{
extend: 'Ext.Sheet',
xtype: 'gallery',

config: {
modal: true,
centered: true,
stretchY: true,
stretchX: true,
fullscreen: true,
layout: 'fit',
items: [
{
xtype: 'toolbar',
docked: 'top',
items: [
{
xtype: 'button',
ui: 'action',
docked: 'right',
iconCls: 'delete',
cls: 'close',
iconMask: true
}
]
},
/*{
xtype: 'carousel',
indicator: false,
items: [
]
}*/
]
},

setImages: function(images) {

var

len = images.length,
items = [],
i;

for(i=0;i<len;i++) {
items.push({
xtype: 'image',
src: images[i].get('src'),
listeners: {
/*
* This is necessary because setting as a style results
* in nothing being shown.
*/
show: function(img) {
img.getEl().setStyle('background-position','center center');
img.getEl().setStyle('background-size','contain');
}
}
});
}

/*
* @bug work around
* This is necessary for the time being because creating
* an empty carousel results in errors.
*/
if(len !== 0) {

if(this.getAt(1)) {
this.removeAt(1);
}

this.add({xtype: 'carousel',items: items,indicator: false});
}

}

});

pm.sreejith
7 Nov 2011, 10:07 PM
Hi Mitchell,

If so, can you explain with an example in ST2?

RuBenKlunZ
1 May 2012, 4:54 AM
I still can't find a good example of using a json store with a carousel component.
So if anyone can show me one I would be very glad!

iyubinest
24 Nov 2013, 7:46 AM
I was trying the last week and I get this sample working. I hope it helps someone.


Ext.define('MyApp.view.MainMenu', {
extend: 'Ext.Container',
xtype: 'menuview',
requires: [
'Ext.Carousel'
],
config: {
layout: 'fit'
},
initialize: function () {


this.callParent(arguments);

var panel = this;
this.setMasked({
xtype: 'loadmask',
message: 'Cargando'
});
var store = new Ext.create('Ext.data.Store',{
autoLoad: true,
fields: ['thumbnail'],
proxy: {
type: 'ajax',
url: 'myurl',
reader: {
type: 'json',
rootProperty: 'data'
}
},
listeners: {
refresh: function( element, data, successful, operation, eOpts ){
var items = [];
data.each(function(rec){
items.push({
html: '<img class="myImage" src="' + rec.get('thumbnail') + '"/>'
});
});
var carousel = new Ext.Carousel({
cardSwitchAnimation: 'slide',
items: items,
itemId: 'carousel'
});
panel.unmask();
panel.add(carousel);
}
}
});
store.load();
}
});