Hi All,
I'm having trouble getting the setActiveItem method to work how I need it to. This is my first time using Sencha Touch. I have built a few apps with Ext 3.1 and Ext 4.0 so I thought I had a good base to start on, but this particular problem giving me trouble.
I have a container with Mitchell Simeons' ST2 Accordion docked left with several lists filled with data loaded from stores. On list item tap I fire a custom method in my controller to load the corresponding store and iterate through each record to build out an items array for a generic carousel view filled with a container that has a template for each carousel item. I then try to setActiveItem by id like I used to with Ext 4. What is happening is that it is setting the wrong item active, it set's the last item in the carousel active instead of the one I'm trying to send in.
I tried using an id with type 'number, when that didn't work I tried converting the id to a string, when that didn't work I tried using Ext.getCmp(id). If someone can shed some light on what I need to do to get this working properly it would be much appreciated.
I was able to, on init, set the active item using index 0, but my app needs more specificity than that.
Code:
Controller:
Code:
Ext.define('TheStreet.controller.News', {
extend: 'Ext.app.Controller',
requires: ['TheStreet.view.Article'],
config: {
refs: {
newsMain : 'newsmain',
newsFeed : 'newsfeed',
newsMenu : 'newsmenu',
article : 'article',
articleCarousel : '#articleCarousel',
sectionTitle : 'button[cls=x-section-title]',
splash : 'splash',
sectionCarousel : 'sectionCarousel'
},
control: {
newsfeed: {
select : 'onArticleTap',
selectionchange : 'onSelectionChange'
},
article: {
widthChange : 'newsWidthChanged',
viewready : 'fillCarousel'
},
sectionTitle: {
tap: 'onSectionTitleTap'
},
articleCarousel: {
viewready: 'onNewsInitialize'
}
}
},
init: function() {
// var me = this;
// this.newsmenu = this.getNewsMenu();
// this.newsmain = this.getNewsMain();
// this.newsfeed = this.getNewsFeed();
// this.article = this.getArticle();
// this.articleCard = this.getArticleCard();
// this.splashCard = this.getSplashCard();
console.log('News Controller Initialized');
},
newsWidthChanged: function(component, value, oldValue, eOpts) {
console.log('changed: ', component);
},
launch: function() {
// var topnews = this.getTopNews(),
// topNewsStore = Ext.getStore('TopNews');
// console.log('topNews:', topnews);
// console.log('topnews xtypes:', topnews.getXTypes());
},
onNewsInitialize: function() {
var articleCarousel = this.getArticleCarousel();
console.log('init carousel', articleCarousel);
this.loadCurrentSectionArticles(articleCarousel, 'StockPicks', 0);
},
onArticleTap: function(selection, record, eOpts) {
var newsmenu = this.getNewsMenu(),
newsmain = this.getNewsMain(),
articleCarousel = this.getArticleCarousel(),
sectionCarousel = this.getSectionCarousel(),
article = this.getArticle(),
storeId = record.stores[0].getStoreId(),
recordId = record.data.articleId;
console.log('Selection');
console.log('==========================');
console.log(selection);
console.log('Record');
console.log('==========================');
console.log(record);
console.log('eOpts');
console.log('==========================');
console.log(eOpts);
console.log('article component:',Ext.getCmp(recordId));
console.log('store id', storeId);
//newsmenu.deselectAllLists();
//sectionCarousel.hide();
this.loadCurrentSectionArticles(articleCarousel, storeId, recordId);
console.log('items',articleCarousel.getItems());
console.log('record id type', typeof(recordId));
//articleCarousel.setActiveItem(recordId);
console.log('active item',articleCarousel.getActiveItem());
},
onSectionTitleTap: function(btn) {
console.log('Button Title', btn.config.text);
var splash = this.getSplash(),
sectionCarousel = this.getSectionCarousel(),
article = this.getArticle(),
//articleCard = this.getArticleCard(),
section = btn.config.text.replace(/\s/g, '');
console.log('section', section);
article.hide();
splash.setStore(section);
sectionCarousel.show();
},
onSelectionChange: function(changed, records, eOpts) {
//console.log(changed, records, eOpts);
},
loadCurrentSectionArticles: function(carousel, store, item) {
console.log('store passed', store);
var store = Ext.getStore(store),
storeData = store.getData(),
items = [],
initItem = item,
changeItem = item.toString();
console.log('store data', storeData);
store.each(function(rec) {
var recId = rec.data.articleId;
items.push(Ext.create('TheStreet.view.Article', {
record: rec,
id: recId.toString()
}));
});
console.log('setActiveItem type', typeof(initItem));
console.log('activeItem passed', Ext.getCmp(changeItem));
carousel.setItems(items);
if (typeof(item) === 'number'){
carousel.setActiveItem(initItem);
} else {
carousel.setActiveItem(Ext.getCmp(changeItem));
}
console.log('carousel items', carousel.getItems());
}
});
Views:
Code:
Ext.define("TheStreet.view.Article", {
extend: 'Ext.Container',
xtype: 'article',
config: {
//id: articleId,
autoDestroy: true,
cls: 'articletpl',
layout: 'fit',
scrollable: {
direction: 'vertical',
directionLock: true
},
tpl: new Ext.XTemplate(
'<div class="sector">{sector}</div>',
'<div class="headline">{headline}</div>',
'<div class="byline">by {byLine}</div>',
'<div class="postedOn">posted on {[this.formatDate(values.publishDate)]}</div>',
'<div class="ticker">Ticker: {tickers}</div>',
'<div class="body"><img class="largeThumb" src="{largeThumb}" alt="" />{body}</article>',
{
// XTemplate configuration:
compiled: true,
formatDate: function(date){
var newDate = Ext.Date.parse(date, 'm-d-YTG:i'),
formattedDate = Ext.Date.format(newDate, 'F j,Y g:ia');
return formattedDate;
}
}
)
}
});
Ext.define("TheStreet.view.ArticleCarousel", {
extend: 'Ext.Carousel',
xtype: 'articleCarousel',
requires: ['TheStreet.view.Article'],
config: {
autoDestroy: true,
id: 'articleCarousel',
items: []
//layout: 'card',
//hidden: true
},
initialize : function() {
var me = this;
me.on('painted', function() {
me.fireEvent('viewready', me);
}, null, { single : true });
me.callParent();
}
});
Please excuse all the console.logs, I was too lazy to remove them.