PDA

View Full Version : JSON data + template in Tabpanel



kevinv1990
13 Sep 2010, 2:14 AM
Hello all,

Thanks Evant to help me with my problem yesterday.

Well my web app is making progress, but now I need to fill the tabpanel body with data from a Json file, every element (in this case every person, both have a name and age) in the json file must be showed in a sort of list in the tabpanel body. Which will be able to click on one of the element to open an overlay (to contact the person, but this I can make myself but would be great if you know how this works and show me).

At the moment I have this code (the comment section is what I tried but don't work, you may either change it completely or edit it so it work).


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

var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',

items: [{
title: 'Home',
html: '<h1>Home<h1>',
iconCls: 'info',
}, {
title: 'Users',
html: '<h1>Users</h1>',
id: 'UserID',
iconCls: 'user'
}]
});


var eventclick = function(){
console.log('test');
/*
Here I try to fill the tabpanel body with the data of the JSON, also I would like to add an template on it later on, so if you can show me how that is possible, it will be great (like make the name in a header and the age in a paragraph with yellow color or something :) I would appreciate it!

var tpl = new Ext.Template('{name} {age}');
Ext.Ajax.request({
url: 'test.json',
success: function(response){
var data = Ext.decode(response.responseText);
tpl.overwrite(tabpanel.body, data);
}
});
*/
};

Ext.getCmp('UserID').on("activate", eventclick);

}
});


the json file:


[ { "name" : "Kevin",
"age" : "20"
},
{ "naam" : "Piet",
"age" : "32"
}
]

So I hope these elements can be showed in the body of the tabpanel and that I can press on them so there will be an overlay panel. (with just some additional information. I maked the source easier and the question too, because actually users will be jobs and the overlay is to apply for the job (send a mail). But you don't have to worry about that, I think I know how to do that if I know how to do this, the difference is not big.


Sincerely,
Kevin

evant
13 Sep 2010, 2:56 AM
You can't just overwrite the tab panel body, because that's where the tab content goes, so I'll just stick it in one of the tabs:



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

var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',

items: [{
title: 'Home',
html: '<h1>Home<h1>',
iconCls: 'info',
}, {
title: 'Users',
html: '<h1>Users</h1>',
id: 'UserID',
iconCls: 'user',
tpl: new Ext.XTemplate('<tpl for="."><div>{name} - {age}</div></tpl>')
}]
});


var eventclick = function(){
// assume we do a request here
/*
Ext.Ajax.request({
url: 'test.json',
success: function(response){
var data = Ext.decode(response.responseText);
tpl.overwrite(tabpanel.body, data);
}
});
*/
tabpanel.items.last().update([{
"name": "Kevin",
"age": "20"
}, {
"name": "Piet",
"age": "32"
}]);
};

Ext.getCmp('UserID').on("activate", eventclick);

}
});

kevinv1990
13 Sep 2010, 5:22 AM
Okay thx Evant.

Well it was helpful, but the only thing is that I use an external json file, with the name test.json. So I tried the following code: (I combined your code with the code from the dev)


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

var store = new Ext.data.JsonStore({
url: 'test.json',
root: 'data',
fields: ['naam', 'leeftijd']
});

// When I include the next line, the web app stops working (only a white screen is shown)
//store.load();

var tpl = new Ext.XTemplate(
'<tpl for="."><div>{naam} - {leeftijd} </div></tpl>'
);


var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',

items: [{
title: 'Home',
html: '<h1>ICams op mobiel<h1>',
iconCls: 'home',
}, {
title: 'Vacatures',
html: '<h1>Vacatures</h1>',
id: 'Vacatures',
iconCls: 'bookmarks',
store: store,
tpl: tpl

}]
});

\\

var eventclick = function(){

// I comment this for a second, to try to use the external json file :)
// tabpanel.items.last().update([{
// "name": "Kevin",
// "age": "20"
// }, {
// "name": "Piet",
// "age": "32"
// }]);
};

Ext.getCmp('Vacatures').on("activate", eventclick);

}
});

json file:

{
"data" : [
{
"naam" : "Kevin",
"leeftijd" : "20"
}, {
"naam" : "Piet",
"leeftijd" : "32"
}
]
}


So when I remove the // before store.load(); everything stops to work, so I don't know what I am doing wrong. You use the eventclick function to update it the panel with names and ages, but should I refer to the external json file in that function or above (as i currently do) or can we completely remove the update function because we use an external json file. I think I need the tabpanel.items.last().update.. code which you gave me, but I do not know how to use it in combination with the data json store.

So I hope someone knows,

Kevin

evant
13 Sep 2010, 5:25 AM
Because you're missing a whole bunch of stuff. Just do an Ajax request like you had before.

kevinv1990
13 Sep 2010, 5:42 AM
Lol yeah, but where? :) sorry that you have to help me with everything.. I am just a newbie I hope you understand. Where and what parameters shall I use for the request?


PS: I will not ask another question today, I understand that I am an annoying newbie ^^, but thanks for helping!

evant
13 Sep 2010, 6:12 AM
There's no real reason to use a store. Just do an Ajax request like you had in your first post.

kevinv1990
13 Sep 2010, 6:45 AM
Okay thx it works!

Final code for the persons who wants to know:


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

var tabpanel = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',

items: [{
title: 'Home',
html: '<h1>ICams op mobiel<h1>',
iconCls: 'home',
}, {
title: 'Vacatures',
html: '<h1>Vacatures</h1>',
id: 'Vacatures',
iconCls: 'bookmarks',
tpl: new Ext.XTemplate('<tpl for="."><div id="tpl"><p>{naam} - {leeftijd}</p></div></tpl>')
}]
});




var eventclick = function(){


Ext.Ajax.request({
url: 'test.json',
success: function(response){
var data = Ext.decode(response.responseText);
//console.dir(data);
tabpanel.items.last().update(data);
}
});


};

Ext.getCmp('Vacatures').on("activate", eventclick);

}
});

gaurang.ma
9 Aug 2011, 11:10 PM
Hey guyz i need ure help on this.

"B4 that pl consider me as a beginer and i am new to sencha touch"

I've tried out the code given out on this link.It works properly if at all we have only two panels on the TABPANEL.If i try to add one more panel to the tabpanel ,the ajax request is renders on the last tab of the TABPANEL declared..here is the code


demos.BottomTabs = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
fullscreen: true,
ui: 'light',


/* here are the items of the TABPANEL */


items: [{
title: 'WELCOME',
html: '<h1><center>HERE ARE YOUR TRANSACTION DEATILS</center><h1>',
iconCls: 'favourites',
tpl: new Ext.XTemplate([

'<div >',
'<h1><center>THIS IS YOUR SAVING ACCOUNTS TRANSACTION</center></h1>',
'<br>',
'<br>',
'<table border="1" align="center">',

'<tr align="centre"><b><th><b> Date</b></th><th><b> Amount </b></th> <th><b> Description </b></th> <th> <b>Location</b> </th></b></tr>',

'<tpl for=".">',
'<tr> </tr>',
'<tr>',
'<td>{date} </td> <td> {amount} </td> <td> {description} </td><td> {location} </td>',

'</tr>',
'</tpl>',
'<table>',

'</div>'
])


}, {

title: 'Savings',
id: 'UserID',
iconCls: 'user',
tpl: new Ext.XTemplate([
'<div >',
'<h1><center>THIS IS YOUR SAVING ACCOUNTS TRANSACTION</center></h1>',
'<br>',
'<br>',
'<table border="1" align="center">',

'<tr align="centre"><b><th><b> Date</b></th><th><b> Amount </b></th> <th><b> Description </b></th> <th> <b>Location</b> </th></b></tr>',

'<tpl for=".">',
'<tr> </tr>',
'<tr>',
'<td>{date} </td> <td> {amount} </td> <td> {description} </td><td> {location} </td>',

'</tr>',
'</tpl>',
'<table>',

'</div>'
])
},{
title: 'Current',
iconCls: 'user',
tpl: new Ext.XTemplate([
'<div >',
'<h1><center>THIS IS YOUR SAVING ACCOUNTS TRANSACTION</center></h1>',
'<br>',
'<br>',
'<table border="1" align="center">',

'<tr align="centre"><b><th><b> Date</b></th><th><b> Amount </b></th> <th><b> Description </b></th> <th> <b>Location</b> </th></b></tr>',

'<tpl for=".">',
'<tr> </tr>',
'<tr>',
'<td>{date} </td> <td> {amount} </td> <td> {description} </td><td> {location} </td>',

'</tr>',
'</tpl>',
'<table>',

'</div>'
])
}]
});


var eventclick = function(){
var tabpanel = demos.BottomTabs;

Ext.Ajax.request({
url: 'test.json',
success: function(response){

var data = Ext.decode(response.responseText);
console.log(response.responseText);
tabpanel.items.last().update(data);
}
});


};



Ext.getCmp('UserID').on("activate", eventclick);





The id given to getCmp function is of the second panel of tabpanel, but the ajax request is rendered on the 3rd panel as it is the last panel of the tabpanel.This case goes on as we go on adding more panels to TABPANEL.