PDA

View Full Version : Help with stores and lists.



oskars
29 Jun 2010, 11:20 PM
I have setup a Json-file like this: Here! (http://www.thunderinthecity.se/app/blog/ajax.asp?show=comments_list2)

I have my code like this:



var mytab = new Ext.Component({
title: 'My Tab',
cls: 'mytab',
scroll: 'vertical',
html: ['Testing...']
});


How do I properyly add my Json-file to a store, and apply it to "mytab" as a list?

I have tried several different codes, but I am a newbie to this, so I need some help =)

Thanks in advance!

oskars
30 Jun 2010, 7:11 AM
I have tried a lot now... why does this code not work?

Chrome Debug sais:
sencha/ext-touch-debug.js:11505
Uncaught TypeError: Cannot read property 'prototype' of undefined




Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {


var timeline2 = new Ext.Component({
title: 'Timeline',
cls: 'timeline',
scroll: 'vertical',
store: 'myStore',
tpl: [
'<tpl for=".">',
'<div class="tweet">',
'<div class="avatar">{Datum}</div;>',
'<div class="tweet-content">',
'<h2>{Namn}</h2>',
'<p>{Text}</p>',
'</div>',
'</div>',
'</tpl>'
]
});

var store = new Ext.data.JsonStore({
// store configs
autoDestroy: true,
url: 'ajax.asp?show=comments_list2',
storeId: 'myStore',
// reader configs
root: 'items',
idProperty: 'Id',
fields: ['Datum', 'Rubrik', 'Namn', 'Text', 'Id']

});


var panel = new Ext.TabPanel({
fullscreen: true,
animation: 'pop',
items: [timeline2]
});



}
});

jeroenvduffelen
30 Jun 2010, 3:15 PM
Hey Oskars,

I've already filed that error as a bug.. seems to be something with the model / fields the JsonReader cannot find.

I don't know if you've got the latest version of Sencha Touch, but this example of setting up a store should work for your component as well.




// First create a model (this is like a blueprint of your json data
// This model will be loaded into you store
Ext.regModel('book', { // book is the name of the model, this name is used in the store
idProperty: 'id', // for the store to recognize the unique id from your json data
fields: [
{name: 'id', type: 'string'},
{name: 'title', type: 'string'},
{name: 'slug', type: 'string'},
{name: 'author', type: 'string'},
{name: 'chapters', type: 'object'},
],
});

this.state.books = new Ext.data.JsonStore({
autoLoad: false, // should the store auto load the data
model: 'book', // convert the raw json data into the right objects for this reader using the "book" model specified above here.
storeId: 'books', // just a unique id for this store
proxy: {
url: '/books.json', // the url the json should be loaded from
type: 'ajax',
reader: {
root: 'books' // the root element of the json data from which this store should load it's objects from.
}
},
});

oskars
1 Jul 2010, 3:27 AM
Oh! Okey! Thanks!

But... with this code:



// First create a model (this is like a blueprint of your json data
// This model will be loaded into you store
Ext.regModel('book', { // book is the name of the model, this name is used in the store
idProperty: 'Id', // for the store to recognize the unique id from your json data
fields: [
{name: 'Datum', type: 'string'},
{name: 'Rubrik', type: 'string'},
{name: 'Namn', type: 'string'},
{name: 'myText', type: 'string'},
{name: 'Id', type: 'string'}
],
});
this.state.book = new Ext.data.JsonStore({
autoLoad: true, // should the store auto load the data
model: 'book', // convert the raw json data into the right objects for this reader using the "book" model specified above here.
storeId: 'mylist', // just a unique id for this store
proxy: {
url: '/ajax.asp?show=comments_list', // the url the json should be loaded from
type: 'ajax',
reader: {
root: 'items' // the root element of the json data from which this store should load it's objects from.
}
},
});


I get this error:
Uncaught TypeError: Cannot set property 'book' of undefined
Row 47 is this.state.book = new Ext.data.JsonStore({

I have tried different combinations.. but can't get it to work.

I have the latest version =)

TommyMaintz
1 Jul 2010, 1:24 PM
It means that this.state doesnt exist yet. Also, you can't bind a store to just any component (although that would be cool).

By switching to using a DataView, DataPanel or List instead of a Component you should be able to achieve what you are trying to do. Could you try the following code?



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// First create a model (this is like a blueprint of your json data
// This model will be loaded into you store
Ext.regModel('book', {
// book is the name of the model, this name is used in the store
idProperty: 'Id',
// for the store to recognize the unique id from your json data
fields: [
{
name: 'Datum',
type: 'string'
},
{
name: 'Rubrik',
type: 'string'
},
{
name: 'Namn',
type: 'string'
},
{
name: 'myText',
type: 'string'
},
{
name: 'Id',
type: 'string'
}
]
});

var bookStore = new Ext.data.JsonStore({
autoLoad: true,
// should the store auto load the data
model: 'book',
// convert the raw json data into the right objects for this reader using the "book" model specified above here.
storeId: 'mylist',
// just a unique id for this store
proxy: {
url: '/ajax.asp?show=comments_list',
// the url the json should be loaded from
type: 'ajax',
reader: {
root: 'items'
// the root element of the json data from which this store should load it's objects from.
}
},
});

var timeline2 = new Ext.DataView({
title: 'Timeline',
cls: 'timeline',
store: 'myStore',
itemSelector: 'div.tweet',
singleSelect: true,
tpl: [
'<tpl for=".">',
'<div class="tweet">',
'<div class="avatar">{Datum}</div>',
'<div class="tweet-content">',
'<h2>{Namn}</h2>',
'<p>{Text}</p>',
'</div>',
'</div>',
'</tpl>'
]
});

var panel = new Ext.TabPanel({
fullscreen: true,
animation: 'pop',
items: [timeline2]
});
}
});

mrsixcount
2 Jul 2010, 8:06 AM
I just tried the code with the following data.json instead of a dynamic driven one just to see if I could get the json reader working but nothing shows up but the tab Timeline.

{
items:[
{Datum: 'Image one', Rubrick:'r', Namn:'Name', myText:'Some Text', Id:'id'},
{Datum: 'Image two', Rubrick:'r2', Namn:'Name2', myText:'Some Text2', Id:'id2'}
]
}

Am I doing something wrong?

Thanks in advance.

TommyMaintz
2 Jul 2010, 11:33 AM
I think its because the property is called 'data', not 'items' on a store.

mrsixcount
6 Jul 2010, 9:45 AM
Hi Tommy,

but in your code your root is "items"


proxy: {
url: '/ajax.asp?show=comments_list',
// the url the json should be loaded from
type: 'ajax',
reader: {
root: 'items'
// the root element of the json data from which this store should load it's objects from.
}
},

TommyMaintz
6 Jul 2010, 10:28 AM
The root is the field in which all your items exist in your json data. If you define data directly on the store, you dont have to define this.

mrsixcount
6 Jul 2010, 10:45 AM
looks like the problem was with the JSON data
should have been double quoted and it then works.

TommyMaintz
6 Jul 2010, 1:36 PM
Awesome! Glad to hear it works now.