Results 1 to 7 of 7

Thread: Building a TabPanel, that loads dynamic panel data

  1. #1

    Default Building a TabPanel, that loads dynamic panel data

    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!

  2. #2


    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'

  3. #3
    Sencha User
    Join Date
    Jun 2010

    Default Small demo app

    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):

    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.
    Attached Files Attached Files

  4. #4
    Sencha User
    Join Date
    Jun 2010

    Default Here's that code pasted in with firefox, IE is screwing with the code block spacing

        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: '',
                            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]

  5. #5


    @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?

  6. #6
    Sencha User
    Join Date
    Jun 2010


    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

  7. #7
    Sencha User
    Join Date
    Mar 2011


    I am newbie in Sencha touch. I tried above example on my's working as it should but when i change URL "" 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??

Similar Threads

  1. Building dynamic forms ?
    By nathanblogs in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 19 Nov 2009, 11:56 PM
  2. adding dynamic content in panel within tabpanel
    By pearl_123 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 18 Apr 2009, 6:50 AM
  3. [2.0rc1]tabpanel: loads the tree only in the activated panel
    By christa in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 21 Dec 2007, 4:23 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts