View Full Version : Building a TabPanel, that loads dynamic panel data

30 Jun 2010, 8:29 PM
I've been reading the API docs and looking at the examples but am struggling to get a basic app structure setup, as the examples are either to simple or overly complex. A middle example with comments for first time users would be incredibly awesome!

Here's what I'm trying to do.

Create a TabPanel with: Favorites, People, Settings...

When the user clicks People in the dock, I'd like to then essentially load the list example dynamically in the main window.

Do I use an eventHandler, Listener or some other Sencha Touch method to make that magic happen? I explored the GEO example but it was pretty complex for a person new to Sencha Touch (which looks great!)

Would it be possible to show a basic example of:
3 TabPanel items
2 of the 3 items have static content (I could figure this out)
1 of the items loads dynamically, the contact list example (/list/)

thanks for the help. I believe once I get past this bump it's going to be smooth sailing!

30 Jun 2010, 8:30 PM
Here's my current block of code: index.js:

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: 'dark',
animation: {
type: 'fade',
cover: true
defaults: {
scroll: 'vertical'
items: [{
title: 'Favorites',
html: '<h1>Favorites Card</h1>',
iconCls: 'favorites',
cls: 'card1'
}, {
title: 'People',
html: '<h1>People Card</h1>',
cls: 'card2',
iconCls: 'user'
}, {
title: 'Files',
html: '<h1>Files Card</h1>',
cls: 'card3',
iconCls: 'more'
}, {
title: 'Settings',
html: '<h1>Settings Card</h1>',
cls: 'card4',
iconCls: 'settings'


30 Jun 2010, 9:28 PM
If you really want a list follow this thread to figure out how to dynamically add items to one (or maybe entirely reload one dynamically): http://www.sencha.com/forum/showthread.php?103011-Dynamically-add-an-item-to-a-list

I've attached an example you can use to see how call backs and panel switching works. I also added card layout for a Please Wait... screen while the call back is occurring, that might come in handy too. Use this for a learning tool, I'm a newbie too so no guarantee this is all the 'proper' way of doing things.

30 Jun 2010, 9:42 PM
onReady: function () {

var favoritesTab = { title: 'Favorites', iconCls: 'favorites', html: 'Favorites' };

var settingsTab = { title: 'Settings', iconCls: 'settings', html: 'Settings' };

var peopleDisplay = new Ext.Component({ scroll: 'vertical',
tpl: ['<tpl for="."><div><img src="{profile_image_url}" /> ' +
'<i>{from_user}</i>: {text}</div></tpl>']

var peopleTab = { id: 'peopleTab', title: 'People', iconCls: 'team', layout: 'card',
items: [{ html: 'Please Wait...' }, peopleDisplay],
listeners: {
activate: function () {
//this == Ext.getCmp('peopleTab')
url: 'http://search.twitter.com/search.json',
callbackKey: 'callback',
params: { q: 'sencha', rpp: 30 },
scope: this,
callback: function (data) {

new Ext.TabPanel({ fullscreen: true,
tabBar: { dock: 'bottom', layout: { pack: 'center'} },
animation: { type: 'cube' },
items: [favoritesTab, peopleTab, settingsTab]


1 Jul 2010, 7:26 AM
@meyerovb This is incredibly helpful - thank you! It works well. I did notice that when you click "people" the app loads the data, if you then click another Tab and click back to People, it seems to have cached the data but it flickers, like it's reloading. Are you seeing that?

1 Jul 2010, 7:30 AM
It's reloading the data, but the browser has cached the request, so it is showing the please wait screen then rewriting and instantly switching to the data screen. You can mod it however you want, it's just a template to show you how to get started. Have fun

9 Mar 2011, 9:22 PM
I am newbie in Sencha touch. I tried above example on my localhost.it's working as it should but when i change URL "http://search.twitter.com/search.json" to "http://localhost/televakt/home.php" no response returning
Here is home .php

echo json_encode(array('results' => array(
'profile_image_url' => 'http://localhost/televakt/images/md.png',
'from_user' => 'Pankaj Dadure',
'text' => 'Hi I am pankaj',

what is exactly problem??