Creating an Icon Grid with ST

[zzerk]

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:

//
// 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);
    }
});

[Eraser]

Hi Ben,

do you have a custom CSS definition for the class "dashboardButton"? How does it look like? Could you also share this please?

Regards,

[digeridoopoo]

I think I managed to get the click listeners working properly for the unique items.

If you replace the code with this bit:

var thisCell = new Ext.Panel({
title: args.cells[cellIndex].label,
cls: 'dashboardButton',
layout: { type: 'vbox', align: 'center', pack: 'center' },
id: args.cells[cellIndex].id,
items: [{ html: args.tpl.replace(/\{(\w+)\}/g, function(match, key) { return args.cells[cellIndex][key]; }) }],
listeners: {
click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(){ console.log(this.getAttribute('id') + ' was clicked'); }
        },
         } 
                    });
                }
                else

..etc.

...then when you check the console log it mentions 'You clicked on'...then the name.

Hope this helps somebody so the next step is to add the unique popups for the individual thumbnails

:-)

Digeridoopoo

[amrishodiq]

Hi Ben Major,
Thanks for sharing the code. I tried it my self. It works like as a grid like you said. I'm able to reproduce the look like yours minus the icons and the css for the label.

By the way, I'm not sure that this code is finished for creating a behaviour like facebook's dashboard. I still cannot produce on click (or any event that occurs when user press one of the icon). Would you share any other code for that? Or maybe it's just me that mistaken?

Do I have to customize this fn function?
Thanks in advance.

listeners: {                            
   tap: {
       element: 'el',
        fn: function() {
            rootPanel.setActiveItem(screens[this.id], {
                type: 'slide'
             });
         }
     }
}

[m4manas]

First and foremost Many thanks for BenMajor for perfecting this dashboard component. It works great.

I got my 2 cents on this. The event listener should not be bound in the grid in each cell. That will clog up the memory and cause the app to crash on iPad and iPhones.

The better way would be to user event delegation.
http://www.sencha.com/blog/event-del...n-sencha-touch

This will ensure we define only one listner and that will capture all the events. Regarding firing custom call on each event it can be filtered using the parameters returned by the listeners and appropriate method can be dispatched.

this.addListener({
      body: {
          tap: this.onDashboardTap,
          delegate: 'img'
      }
    });
      

onDashboardTap: function(a, b, c, d){
        console.log('Tapped');
        console.log(a);
        console.log(b);
        console.log(c);
                                
    },

[bhavin]

i m not that much experienced developer of sencha touch, i still successfully implement this "GridView" but i am not able to understand the "

/\{(\w+)\}/g

" code at line "

items: [{ html: args.tpl.replace(/\{(\w+)\}/g, function(match, key) { return args.cells[cellIndex][key]; }) }],

" .....

thanx in advance.....

[Abhishek Srivastava]

very helpful thread........

[dnkupfer]

Hi everyone,

this thread discuss exactly what I'm trying to achieve (a menu grid of icons that can be clicked and navigate to different sections). I've tried to implement the code provided by BenMajor but my icons are superimposing each other in one line (like Sakoz mentioned). That's probably because I've also replaced Ext.Carousel with Ext.Panel because Carousel was giving me the following error:

TypeError: 'undefined' is not a constructor (evaluating 'new Ext.Carousel')

Any help will be much appreciated. Please find below my code.

Thanks,
Daniel

Ext.application({
    name: 'MyApp',


    launch: function() {


        var dashboardCfg = {
            defaultCls: 'dashboardButton',
            cols: 3,
            rows: 3,
            title: 'Dashboard',
            cells: [
                { id: 'profile', label: 'Profile', icon: 'resources/images/test_img.png' },
                { id: 'friends', label: 'Friends', icon: 'resources/images/test_img.png' },
                { id: 'networks', label: 'Networks', icon: 'resources/images/test_img.png' },
                { id: 'search', label: 'Search', icon: 'resources/images/test_img.png' },
                { id: 'messages', label: 'Messages', icon: 'resources/images/test_img.png' },
                { id: 'requests', label: 'Requests', icon: 'resources/images/test_img.png' },
                { id: 'map', label: 'Map', icon: 'resources/images/test_img.png' },
                { id: 'lock', label: 'Lock', icon: 'resources/images/test_img.png' },
                { id: 'settings', label: 'Settings', icon: 'resources/images/test_img.png' },
            ],
            tpl: '<img src="{icon}" title="{label}" width="48" height="48" /><span>{label}</span>'
        };


        // This is a custom method for making a dashboard:
        var GridView = function(args)
        {   
            var totalItems = args.cells.length;
            var maxBtnsPerPane = args.cols * args.rows;
            var noPanes = Math.ceil(totalItems / maxBtnsPerPane);
            var panes = [];
            var cellIndex = 0;
            var showIndicator;


            // Create the panes:
            for(var i = 0; i < noPanes; i++)
            {
                panes[i] = new Ext.Panel({
                    title: 'Dashboard' + (i + 1),
                    layout: { type: 'vbox', align: 'stretch' },
                    pack: 'center',
                    defaults: { flex: 1 }
                });
                
                var thisCount = i + maxBtnsPerPane;
                
                // Loop through how many rows we need:
                for(var rowCount = 0; rowCount < args.rows; rowCount++)
                {
                    var thisRow = new Ext.Panel({ layout: { type: 'hbox', align: 'stretch', pack: 'center' }, id: 'row' + (rowCount + 1), defaults: { flex: 1 } });
                    
                    // Now we need to add the cells:
                    for(var colCount = 0; colCount < args.cols; colCount++)
                    {
                        var cellLabel, handlerFunc;
                        
                        (cellIndex > (totalItems - 1)) ? cellLabel = '' : cellLabel = args.cells[cellIndex].label;


                        if(cellIndex < totalItems)
                        {
                            var thisCell = new Ext.Panel({
                                title: cellLabel,
                                cls: 'dashboardButton',
                                layout: { type: 'vbox', align: 'center', pack: 'center' },
                                id: args.cells[cellIndex].id,
                                items: [{ html: args.tpl.replace(/\{(\w+)\}/g, function(match, key) { return args.cells[cellIndex][key]; }) }],
                                listeners: { tap: { element: 'element', fn: function() { rootPanel.setActiveItem(screens[this.id], { type: 'slide' } ); } } }
                            });
                        }
                        else
                            var thisCell = new Ext.Panel({ title: '' })
                        
                        thisRow.add(thisCell);
                        cellIndex++;
                    }
                    panes[i].add(thisRow);
                }
            }
            
            (noPanes == 1) ? showIndicator = false : showIndicator = true;
                


            var gridview = new Ext.Container({
                title: args.title,
                items: panes,
                indicator: showIndicator,
            });
            
            return gridview;
        };


        var dashboard = new GridView(dashboardCfg);


        var list = new Ext.Panel ({
            fullscreen: true,
            layout: { type: 'vbox', align: 'stretch' },
            scrollable: true,
            items: [dashboard],
        })
    },
});

[kramprabhu]

Thats work great. thanks.
But how to make it work for landscape and portrait together.
I have defined 3 column.. but if we look at landscape.. then I think 4 column could be better.
-Ram

[ahmedeloufir]

Great work ! Can you please provide us with the dashboardButton cls please ?