Forum /
Sencha Touch 2.x Forums /
Sencha Touch 2.x: Q&A /
Unanswered: JSONP list (twitter feed) won't display
Unanswered: JSONP list (twitter feed) won't display
Can anyone please give me a little help here? I'm pulling my hair out I've been spending so much time trying to figure this out and I feel like it's something simple. When I open the app the console gives error:
TypeError: 'undefined' is not a function (evaluating 'item.getId()') sencha-touch-all-debug.js: 45460
And then when I pull to refresh, the refresh function works, but no tweets populate and the console logs:
TypeError: 'null' is not an object (evaluating 'store.getProxy') sencha-touch-all-debug.js: 62458
Please see below for the main view file (FrontPageContainer.js), the Tweets.js files (for view, store, and controller), and the app.js file. I think this is enough, but if you need more info I will certainly provide it.
// app.js is below:
//<debug>
Ext.Loader.setPath({
'Ext': 'src'
});
//</debug>
Ext.application({
name: 'TheNameOfTheApp',
twitterSearch: '#example',
requires: [
'TheNameOfTheApp.view.Tweets' //,
//'Ext.Map'
],
controllers: [
'Main',
'Tweets'
],
views: [
'FrontPageContainer',
'Tweets'
],
stores: [
'Tweets'
],
models: [
],
icon: {
57: 'resources/icons/Icon.png',
72: 'resources/icons/Icon~ipad.png',
114: 'resources/icons/Icon@2x.png',
144: 'resources/icons/Icon~ipad@2x.png'
},
phoneStartupScreen: 'resources/loading/Homescreen.jpg',
tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('TheNameOfTheApp.view.FrontPageContainer'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function() {
window.location.reload();
}
);
}
});
//view.FrontPageContainer.js is below:
Ext.define("TheNameOfTheApp.view.FrontPageContainer", {
});
Ext.create('Ext.TabPanel', {
xtype: 'thefrontpage',
fullscreen : true,
tabBarPosition : 'bottom',
requires: [
'Ext.field.Search'
],
items : [
{
xtype: 'titlebar',
//title: '',
docked: 'top',
style: 'font: Klavika bold',
title: 'mywebsitename',
items: [
{ xtype: 'button',
iconMask: true,
ui: 'plain',
id: 'check-in-button',
align: 'right',
iconCls: 'locate' //was nosecls
}//,
// Ext.create('Ext.Button', {
// iconMask: true,
// ui: 'plain',
// align: 'left',
// iconCls: 'logocls', //was more
// action: 'onCheckInClick'
// }),
]
},
{
xtype: 'titlebar',
style: 'border: none; font: 10px Arial black',
title: '"example slogan"',
//ui: 'light',
docked: 'bottom'
},
{
title : 'main',
iconCls : 'homecls',
layout : 'vbox',
items : [
{
xtype: 'toolbar',
ui: 'neutral',
items: [
{
xtype : 'searchfield',
placeHolder: ' events by keyword...',
name : 'searchfield'
}
]
},
{
xtype : 'panel',
layout : 'fit',
flex : 1,
items : [ {
xtype : 'list',
itemTpl : '{title}',
listeners: {
select: function(view, record) {
Ext.Msg.alert('Front page item selected', 'User pressed ' + record.get('title'));
}
},
store : {
fields : [ 'title' ],
data : [ {
title : 'Login with facebook'
}, {
title : 'Explore'
}, {
title : 'Get app'
}, {
title : 'About us'
}, {
title : 'Settings'
}, {
title : 'Privacy and Terms of Service'
} ]
}
},
]
}
]
},
{
title : 'info',
iconCls : 'braincls',
html : 'text.'
},
{
title : 'other',
iconCls : 'sharecls',
html : 'text.'
},
{
xclass: 'TheNameOfTheApp.view.Tweets'
},
{
title : 'stuff',
iconCls : 'eyecls',
html : 'text.'
}
]
});
//view.Tweets.js is below:
Ext.define('TheNameOfTheApp.view.Tweets', {
extend: 'Ext.List',
requires: [
'Ext.plugin.PullRefresh',
'Ext.plugin.ListPaging'
],
xtype: 'tweets',
config: {
title: 'tweets',
iconCls: 'earcls',
cls: 'tweets',
items: [
{
docked: 'top',
xtype: 'titlebar',
ui: 'light'
}
],
// storeId: 'Tweets',
limit: 10,
disableSelection: true,
plugins: [
{ type: 'listpaging' },
{ type: 'pullrefresh' }
],
emptyText: '<p class="no-searches">No tweets found matching that search</p>',
itemTpl: Ext.create('Ext.XTemplate',
'<img src="{profile_image_url}" />',
'<div class="tweet">',
'<span class="posted">{[this.posted(values.created_at)]}</span>',
'<h2>{from_user}</h2>',
'<p>{text}</p>',
'</div>',
{
posted: function(date) {
try {
var now = Math.ceil(Number(new Date()) / 1000),
dateTime = Math.ceil(Number(new Date(date)) / 1000),
diff = now - dateTime,
str;
if (diff < 60) {
return String(diff) + ' seconds ago';
} else if (diff < 3600) {
str = String(Math.ceil(diff / (60)));
return str + (str == "1" ? ' minute' : ' minutes') + ' ago';
} else if (diff < 86400) {
str = String(Math.ceil(diff / (3600)));
return str + (str == "1" ? ' hour' : ' hours') + ' ago';
} else if (diff < 60 * 60 * 24 * 365) {
str = String(Math.ceil(diff / (60 * 60 * 24)));
return str + (str == "1" ? ' day' : ' days') + ' ago';
} else {
return Ext.Date.format(new Date(date), 'jS M \'y');
}
} catch (e) {
return '';
}
}
}
)
}
});
//store.Tweets.js is below:
Ext.define('TheNameOfTheApp.store.Tweets', {
extend: 'Ext.data.Store',
config: {
fields: ['from_user', 'profile_image_url', 'text', 'created_at'],
pageSize: 10,
proxy: {
type: 'jsonp',
url: 'http://search.twitter.com/search.json',
pageParam: 'page',
limitParam: 'rpp',
reader: {
type: 'json',
rootProperty: 'results'
}
}
}
});
//controller.Tweets is below:
Ext.define('TheNameOfTheApp.controller.Tweets', {
extend: 'Ext.app.Controller',
config: {
refs: {
title: 'tweets titlebar'
},
control: {
tweets: {
activate: 'onActivate'
}
}
},
onActivate: function() {
if (!this.loadedTweets) {
this.getTitle().setTitle(TheNameOfTheApp.app.twitterSearch);
Ext.getStore('Tweets').getProxy('http://search.twitter.com/search.json').setExtraParams({
q: TheNameOfTheApp.app.twitterSearch
});
Ext.getStore('Tweets').load();
this.loadedTweets = true;
}
}
});
Sencha is used by over two million developers. Join the community, wherever you’d like that community to be
or Join Us