PDA

View Full Version : Touch 2 dynamic carousel



bstras21
18 Nov 2011, 4:22 PM
Does anyone have any good examples of integrating a dynamic carousel/certain amount of items per page via the controller?

Thanks!

mitchellsimoens
18 Nov 2011, 4:26 PM
Just a simple case of add/remove on the carousel

bstras21
18 Nov 2011, 4:36 PM
Looks like that is what I was looking for, thanks.

pm.sreejith
21 Nov 2011, 8:01 PM
Does anyone have any good examples of integrating a dynamic carousel/certain amount of items per page via the controller?

Thanks!

I hope you are using ST2.0 pr2 with MVC pattern. please try in the way, given below:



controller
-----------------
refs: [
{ ref:'article',
selector:'article'
},

init: function() {
this.onHomeCarouselLoad(); //Loading contents to carousel home page top section

},

onHomeCarouselLoad: function() {
var articleHomeCarousel= this.getArticleCarouselStore();
articleHomeCarousel.load({
scope : this,
callback: function(records, operation, success) {
var items = [];
//the operation object contains all of the details of the load operation
articleHomeCarousel.each(function(rec){
items.push({
html:"<div style='float:left;width:100%;'><div class='txttitle' style='float:left;width:40%;margin-top:30px;margin-left:10px;'><h1 id='artTitle' lang='"+ rec.get('articleid') +"'>"+ rec.get('title') +"</h1><p>"+ rec.get('shortdesc') +"<a href='#' id='readMore' name='"+ rec.get('articleid') +"'>read more>></a></p></div><div style='float:left;width:57%;'><img id='imgTag' alt='"+ rec.get('articleid') +"' src='"+ rec.get('image') +"' width='100%' height='90%' border='0'/></div></div>"
});
});

this.getArticle().setItems(items);
this.getArticle().removeAt(0);
this.getArticle().setActiveItem(0);
}
});

}


store
--------
Ext.define('Sencha.store.ArticleCarousel', {
extend : 'Ext.data.Store',
xtype: 'ArticleCarousel',
model : 'Sencha.model.ArticleCarousel',
requires: ['Sencha.model.ArticleCarousel'],

proxy: {
type: 'ajax',
url : 'sample.php',
reader: {
type : 'json',
root : 'articles',
totalCount : 'total'
}
},
autoLoad: true
});


Model
-----------
Ext.define('Sencha.model.ArticleCarousel', {
extend: 'Ext.data.Model',
fields: [
{name: 'articleid', type: 'number'},
{name: 'title', type: 'string'},
{name: 'shortdesc', type: 'string'},
{name: 'image', type: 'string'}
]
});

view
--------
Ext.define('Sencha.view.Article', {
extend: 'Ext.Carousel',
xtype: 'article',

config: {
title: 'Articles',
iconCls: 'star',
height: 400,
items:[{}]
}

});

oddz
21 Nov 2011, 8:16 PM
A store can be set on a Carousel because it extends ComponentView.