O'Reilly logo

Sencha Touch 2 Mobile JavaScript Framework by Bryan P. Johnson, John Earl Clark

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adding to the basic application

Let's start by taking a look at our raw generated application. Currently, if you load the application into your web browser, you should see something like this:

Adding to the basic application

This view we are looking at comes from the app/view/Main.js file, which is a tab panel with two subpanels. We are going to replace this code with a much simpler tab panel:

Ext.define('FlickrFinder.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
        'FlickrFinder.view.SearchPanel',
        'FlickrFinder.view.SavedPanel'
    ],
    config: {
        tabBarPosition: 'bottom',
        items: [
           { xtype: 'searchpanel'},
           { xtype: 'savedpanel'}
        ]
    }
});

Like the code we are replacing, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required