PDA

View Full Version : Layout and template



dbottillo
12 Jul 2010, 1:11 PM
Hi,

i have some problem when i'm trying to create this type of layout:

a list of item (like: image, title and brief description)
then in this list of item, for each item i want to put a button to enter in a new page
it's like a template for a list of offers and a button to enter in a page of a full description of a single offer

what i create now it's a list of item
i create a toolbar, i put an ext.component with a template...then i read a json and do an update of the component (so the template is populated by the update)

but now i can i make a link to a new component that represent the page of a single item?

from the examples i just saw from 'Guide' to create a list of items but how can i do a subpage for every single items?

Thank you

Daniele

dbottillo
13 Jul 2010, 2:24 AM
after searching and looking in the forum i found this solution:


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});

var list = new Ext.List({
tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
itemSelector: 'div.contact',
title: 'People',
singleSelect: true,
store: new Ext.data.Store({
model: 'Contact',

getGroupString: function(record){
return record.get('firstName')[0];
},
data: [{
firstName: 'Tommy',
lastName: 'Maintz'
}, {
firstName: 'Ed',
lastName: 'Spencer'
}, {
firstName: 'Jamie',
lastName: 'Avins'
}, {
firstName: 'Aaron',
lastName: 'Conran'
}]
}),
listeners: {
itemtap: function(view, index, item, e){
var rec = view.store.getAt(index);
main.setCard(1);
detail.update({
firstName: rec.get('firstName'),
lastName: rec.get('lastName')
})
},
beforeactivate: function () {
Ext.getCmp('topToolbar').setTitle(this.title);
}
}
});

var detail = new Ext.Panel({
tpl: '<tpl for=".">First: {firstName}<br />Last: {lastName}</tpl>',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
text: 'Back',
handler: function(){
main.setCard(0);
}
}]
}]
});

var main = new Ext.Container({
layout: 'card',
iconCls: 'more',
items:
[list, detail]
});

new Ext.TabPanel({
fullscreen: true,
ui: 'light',
animation: { type: 'cube', direction: 'down' },
tabBar: { dock: 'bottom', layout: { pack: 'center'} },
dockedItems: [{ id: 'topToolbar', dock: 'top', xtype: 'toolbar', title: 'My title'}],
items: [main,
{ title: 'Search', iconCls: 'search'
}],
defaults: {
listeners: {
beforeactivate: function () {
Ext.getCmp('topToolbar').setTitle(this.title);
}
}
}
});
}
});and it works very well!!
but remain a problem:
i can't get data from a json!
so i dont want to define data in Ext.Store, i want to load dinamically data
i try to puts an event 'activate' to the listeners of the list...and in this event to get data and make a list.update but it doesn't work!

i also try this:

store : new Ext.data.Store({
autoLoad: true,
model: 'Contact',
proxy: {
type: 'scripttag',
url: 'index_temp.json',
reader: {
type: 'json'
}
}
}),but it renders a blank page without any errors
index_temp.json is:

Ext.util.JSONP.callback([{
"firstName":"Tommy",
"lastName":"Maintz"
}, {
"firstName":"Ed",
"lastName":"Spencer"
}, {
"firstName":"Jamie",
"lastName":"Avins"
}]);(i got it from an example's forum)

so how can i resolve this problem?

Thank you

Daniele

evant
13 Jul 2010, 3:11 AM
If you're loading data from the same server, use an AjaxProxy, not a ScriptTagProxy.

If you just copy code without understanding why the pieces are there, you're going to have problems!

dbottillo
13 Jul 2010, 4:26 AM
i'm not just coping, i understand what the code do (i write many different code on my pc to understand layout and other stuff)

but i think that documentation and tutorials are not enough to create complicated application

maybe i'm blind but i didn't see anything about AjaxProxy and ScriptTagProxy in tutorial (only in the example 'guide' there is a ajax call to search twitter json...but it work very dfferent, it's in listener activate and do the update of a component)

anyway as soon as possibile i'll try to use AjaxProxy (even if i remember that i try to load from an external json and it didn't work...!)

however thank you for help me, i really appreciate

Daniele

TommyMaintz
13 Jul 2010, 1:46 PM
There are currently several people working on guides and tutorials that will hopefully help new users to get started easier. There are some basic HTML / javascript concepts that you will need to be familiar with in order to use Sencha Touch efficiently.

Just two quick tips:
- If you need to get data cross domain through some webservice/api you have to use the scripttag proxy. This is because XMLHttpRequest is restricted to the same domain.
- If you have control over your serverside and the data exists on the same domain, you will want to just use regular ajax.

dbottillo
15 Jul 2010, 1:22 AM
ok thank you for reply

but the example still not working!
i try


Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
store : new Ext.data.Store({
autoLoad: true,
model: 'Contact',
proxy: {
type: 'Ajax',
url: 'index_temp.json',
reader: {
type: 'json'
}
}
}),so, type Ajax because it's on the same domain but still show nothing
i have also read danvega post (where riassume all params) on this thread: http://www.sencha.com/forum/showthread.php?104143-Twitter-Example
but i think it's ok my store: a store with ajax proxy and json reader

i also try evant's code from the same thread:

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]
});

}
});where store have a proxy scripttag (because json is outside my domain) and result type json, but it doesn't show anything (chrome, firefox and my nexus one)

the problem is just Store because i try

store: new Ext.data.Store({
model: 'Tweet',
data: [{
id: '1',
profile_image_url: 'test',
from_user: 'test',
text: 'test'
}, {
id: '2',
profile_image_url: 'test',
from_user: 'test',
text: 'test'
}, {
id: '3',
profile_image_url: 'test',
from_user: 'test',
text: 'test'
}, {
id: '4',
profile_image_url: 'test',
from_user: 'test',
text: 'test'
}]
})and it works fine!

so i can't write a Store that working on local and also with an external jSon

can you help me?

dbottillo
15 Jul 2010, 1:30 AM
i have still problem on reading a working Store
i try:

Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
store : new Ext.data.Store({
autoLoad: true,
model: 'Contact',
proxy: {
type: 'Ajax',
url: 'index_temp.json',
reader: {
type: 'json'
}
}
}),but still not working! i have read thread http://www.sencha.com/forum/showthread.php?104143-Twitter-Example where danvega post explain all params...and i think my are correct
a store with ajax because json is in the same domain and a json reader

i also try evant's code for twitter example with json store like:

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'
}
}
})
but it doesn't work, i try with

store: new Ext.data.Store({
model: 'Tweet',
data: [{
id: '1',
profile_image_url: 'test',
from_user: 'test',
text: 'test'
}, {
id: '2',
profile_image_url: 'test',
from_user: 'test',
text: 'test'
}, {
id: '3',
profile_image_url: 'test',
from_user: 'test',
text: 'test'
}, {
id: '4',
profile_image_url: 'test',
from_user: 'test',
text: 'test'
}]
})and it work fine...so is just a problem with store

i'm really being crazy!!!