Twitter Example

[danvega]

I tried taking the twitter example and simplifying it a little so that I could better understand how it works. I moved everything into a basic application. The only problem is the following code just won't work like this and I can't figure out what I am doing wrong. Every time I run the following (or some variation) I get the error

"this.model is undefined
[Break on this error] var fields = this.model.prototype.fields.items, ext-to...ebug.js (line 11799"



Ext.setup({
icon: 'assets/images/icon.png',
glossOnIcon:true,
onReady: function(){

var titleBar = new Ext.Toolbar({
dock: 'top',
ui: 'light'
});

Ext.regModel('Tweet', {
fields: [
{name: 'id',type: 'int'},
{name: 'profile_image_url',type: 'string'},
{name: 'from_user',type: 'string'},
{name: 'text',type: 'string'}
]
});

var timeline = new Ext.List({
title:'Twitter',
iconCls:'time',
cls: 'timeline',
scroll: false,
tpl: [
'<tpl for=".">',
'<div class="tweet">',
'<img src="{profile_image_url}" />',
'<div class="x-tweetanchor"></div>',
'<div class="tweet-bubble">',
'<div class="tweet-content">',
'<h2>{from_user}</h2>',
'<p>{text}</p><strong></strong>',
'<span class="posted">{created_at}</span>',
'</div>',
'</div>',
'</div>',
'</div>',
'</tpl>'
].join(''),
itemSelector: 'div.tweet',
emptyText : '<p style="padding: 10px">No tweets found matching that search</p>',

store: new Ext.data.Store({
autoLoad: true,
model: "Tweet",
proxy: new Ext.data.ScriptTagProxy({
url: 'http://search.twitter.com/search.json',
extraParams: {
q: 'Cleveland',
rpp: 50,
suppress_response_codes: true
}
})
})
});

var tp = new Ext.TabPanel({
fullscreen:true,
dockedItems:[titleBar],
ui:'light',
animation:{type:'slide',cover:true},
tabBar: {
centered:true,
dock:'bottom',
layout: {pack:'center'}
},
defaults:{
scroll:'vertical'
},
listeners: {
afterlayout : function() {
titleBar.setTitle(this.layout.activeItem.title);
},
cardswitch: function(card) {
titleBar.setTitle(card.title);
}
},
items:[timeline]
});

}
});

[evant]

Ext.setup({
icon: 'assets/images/icon.png',
glossOnIcon: true,
onReady: function(){

var titleBar = new Ext.Toolbar({
dock: 'top',
ui: 'light'
});

Ext.regModel('Tweet', {
fields: [{
name: 'id',
type: 'int'
}, {
name: 'profile_image_url',
type: 'string'
}, {
name: 'from_user',
type: 'string'
}, {
name: 'text',
type: 'string'
}]
});

var timeline = new Ext.List({
title: 'Twitter',
iconCls: 'time',
cls: 'timeline',
scroll: false,
tpl: ['<tpl for=".">', '<div class="tweet">', '<img src="{profile_image_url}" />', '<div class="x-tweetanchor"></div>', '<div class="tweet-bubble">', '<div class="tweet-content">', '<h2>{from_user}</h2>', '<p>{text}</p><strong></strong>', '<span class="posted">{created_at}</span>', '</div>', '</div>', '</div>', '</div>', '</tpl>'].join(''),
itemSelector: 'div.tweet',
emptyText: '<p style="padding: 10px">No tweets found matching that search</p>',

store: new Ext.data.Store({
autoLoad: true,
model: "Tweet",
proxy: {
type: 'scripttag',
url: 'http://search.twitter.com/search.json',
extraParams: {
q: 'Cleveland',
rpp: 50,
suppress_response_codes: true
},
reader: {
type: 'json',
root: 'results'
}
}
})
});

var tp = new Ext.TabPanel({
fullscreen: true,
dockedItems: [titleBar],
ui: 'light',
animation: {
type: 'slide',
cover: true
},
tabBar: {
centered: true,
dock: 'bottom',
layout: {
pack: 'center'
}
},
defaults: {
scroll: 'vertical'
},
listeners: {
afterlayout: function(){
titleBar.setTitle(this.layout.activeItem.title);
},
cardswitch: function(card){
titleBar.setTitle(card.title);
}
},
items: [timeline]
});

}
});

[danvega]

You deserve a raise Evan! haha...

Do you know of anywhere that explains stores,proxies and readers? The docs are a little short and I think my main problem is not understanding how the work.

Thanks again!!!

[evant]

What do you mean by "explains", as in, the relationship between them?

[danvega]

Yes. I am just trying to understand the different classes and what their purposes are. It always helps me to talk it out so please feel free to add anything to this.

Proxy
It is how we retrieve data. There are many ways you would want to consume data (web service,rest,local) and the following classes help to cover all of these.
- Ajax
- Client
- Local Storage
- Memory
- REST
- ScriptTag
- Server
- Session
- WebSocket
- WebStorage

Reader
The store itself has no idea how to read the data that the proxy has retrieved for us. Without a reader we could gather the data but we would never be able to use it. We have readers that know how to handle different formats of data.
- Array
- JSON
- XML

Store
Holds data based on our model and has methods for performing operations like sorting and filtering.
- Ext.data.Store

So know that we know we know how to pull data and how to read it we also find out that there are special stores that make this process easier. The special store will already be configured to read a particular format of data
- Ext.data.JsonStore
- Ext.data.JsonPStore
- Ext.data.ArrayStore
- Ext.data.XmlStore

[evant]

That's pretty much spot on.

[danvega]

So with that I decided to create a brand new example and I can't figure out whats wrong. I have some json data



{
"images": [
{
"name": "Image One",
"url": "/GetImage.php?id=1",
"size": 46.5
},
{
"name": "Image Two",
"url": "/GetImage.php?id=2",
"size": 43.2
}
]
}


Then I created a store and this part totally makes sense to me now. If I look in firebug i can see the request is ran because autoLoad was set to true and I see the correct response.



var dataStore = new Ext.data.Store({
autoLoad:true,
model:'Image',
proxy: new Ext.data.AjaxProxy({
url:'data/test.txt',
reader:{
type:'json',
root:'images'
}
})
});


However If I add this store to a list I don't see any items on the list? The store is fine right? So what is wrong with this list?



var imagesList = new Ext.List({
fullscreen:true,
tpl: '<tpl for="."><div class="image"><strong>{name}</strong></div></tpl>',
singleSelect: true,
grouped:true,
store:dataStore
});

[danvega]

Anyone know why this is not working? It is really starting to bug me and I can't seem to figure it out

[dbottillo]

I am also interested in resolving this issue, anyone?