Basic list display problem

[notinotinoti]

Hello~

I want to display each item in each line.

But this code`s result display all items in one line.

I can not solve this problem.

Please help me.. (Sorry about my pool English level.. )








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

onReady: function() {

Ext.regModel('testData', {
fields: ['title', 'post', 'date', 'link']
});

var listItems = [];
var results = [];

this.fund = new Ext.Component({
tpl: [
'<div class="json-data">',
'<tpl for=".">',
'<div class="data">',
'<div class="title">{title}</div>',
'<div class="post">{post}</div>',
'<div class="date">{date}</div>',
'<div class="link">{link}</div>',
'</div>',
'</tpl>',
'</div>'
]
});
listItems.push(this.fund);

Ext.util.JSONP.request({
url: 'http://www.calculatewhat.com/data.json',
callbackKey: 'callback',
callback: function(data) {
try{
listItems[0].update(data);
}
catch(error){
alert(error);
}
}
});

var panel = new Ext.List({
fullscreen: true,
animation: 'slide',
itemSelector: 'div.json-data',
items: [listItems[0]]
});
}
});




ex)

Wrong result (present)

------------
Title 1
Post Text 1
Date 1
URL 1
Title 2
Post Text 2
Date 2
URL 2
------------



Correct result (future)

------------
Title 1
------------
Post Text 1
------------
Date 1
------------
URL 1
------------
Title 2
------------
Post Text 2
------------
Date 2
------------
URL 2
------------

[evant]

That's not the point of the template.

Surely you want to group each item, eg:



Title 1 - Date 1
Post 1
---------------
Title 2 - Date 2
Post 2


Anyway, you're using the wrong component. You should do it like this:



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

onReady: function(){

Ext.regModel('testData', {
fields: ['title', 'post', 'date', 'link']
});

var store = new Ext.data.Store({
autoLoad: true,
model: 'testData',
proxy: {
type: 'scripttag',
url: 'http://www.calculatewhat.com/data.json',
reader: {
type: 'json'
}
}
});

var panel = new Ext.List({
fullscreen: true,
animation: 'slide',
itemSelector: 'div.json-data',
tpl: ['<div class="json-data">', '<tpl for=".">', '<div class="data">', '<div class="title">{title}</div>', '<div class="post">{post}</div>', '<div class="date">{date}</div>', '<div class="link">{link}</div>', '</div>', '</tpl>', '</div>']
});
}
});


You'll also need to modify your server side data to match the callback name, it gets passed as a parameter. It will be something like callback=stcCallback1001

[notinotinoti]

Thank you. But this code is not operate.

Console log :

Uncaught TypeError: Cannot read property 'callback' of null ext-touch-debug.js:5553



Also I don`t under stand your script.

"You'll also need to modify your server side data to match the callback name, it gets passed as a parameter. It will be something like callback=stcCallback1001"



What should I do?

[evant]

As I said, have a look at the twitter example. See how it passes the request to the server and receives a response.