
Originally Posted by
bstras21
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:
Code:
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:[{}]
}
});