I could display a dashboard thanks to your code however, I am a bit confused about how to handle user actions.

I assume that clicking on one of the icon of your dashboard will trigger the display of new panels, but cannot find how to do this (typically by having the method OnTapEvent of my main panel being called)

Below is my code:
Code:
//
// Create the main application screen (dashboard)
//
// The class provides three public functions:
// - initComponent: actual screen initialisation
// - buildTopDockToolbar: create the title bar on top of screen
// - buildDashboard: create the dashboard itself
// - onItemTap: respond to tap event (at least trying to!)
//
bat.AppDashboard = Ext.extend(Ext.Panel,
{
    layout: 'fit',
    style: "background-color: #ffe",

    //
    // initComponent: Initialisation of the new panel
    //
    initComponent: function()
     {
        console.log('BAT::AppDashBoard.InitComponent()');

        // Create the toolbar and the dashboard
        // and store them in the current panel
        this.dockedItems = [this.buildTopDockToolbar()];
        this.items       = [this.buildDashboard()];

        // superclass initialisation
        bat.AppDashboard.superclass.initComponent.call(this);
    },

    //
    // Creation of the top toolbar
    //
    buildTopDockToolbar: function()
     {
        console.log('BAT::AppDashBoard.buildTopDockToolbar()');
        return {
            xtype: 'toolbar',
            dock:  'top',
            title: 'BAT v1'
        };
    },

    //
    // Respond to tap item
    //
    onItemTap: function(btn)
    {
        console.log('BAT::AppDashBoard.onItemTap()');  
        // would like to have this called from the dashboard
    },


    //
    // Creation of the dashboard
    //
    buildDashboard: function() 
    {
        console.log('BAT::AppDashBoard.buildDashboard()');

        var dashboardCfg =
         {
            defaultCls: 'dashboardButton',
            cols: 3,
            rows: 3,
            title: 'Dashboard',
            cells: [
                { id: 'calendar', label: 'Calendrier',  icon: 'assets/icons/dashboard/calendar.png' },
                { id: 'artists',  label: 'Artistes',    icon: 'assets/icons/dashboard/artists.png' },
                { id: 'pubs',     label: 'Bars',        icon: 'assets/icons/dashboard/pubs.png' },
                { id: 'buzz',     label: 'Buzz',        icon: 'assets/icons/dashboard/buzz.png' },
                { id: 'radar',    label: 'Radar',       icon: 'assets/icons/dashboard/radar.png' },
                { id: 'tips',     label: 'Pratique',    icon: 'assets/icons/dashboard/tips.png' },
                { id: 'partners', label: 'Partenaires', icon: 'assets/icons/dashboard/partners.png' },
                { id: 'about',    label: 'A propos',    icon: 'assets/icons/dashboard/about.png' },
            ],
            tpl: '<center><img src="{icon}" title="{label}" width="54" height="54" /><br/><span>{label}</span></center>',
            selectionCallback: this.onItemTap
        };
        return new GridView(dashboardCfg);
    }
});