Hello,

Firstly, allow me to introduce myself. I am a web developer from the UK, and am currently trying to learn Sencha Touch for some future projects and my own interest. I have been experimenting with other mobile web application frameworks such as jQuery Mobile and jQTouch, but feel that Sencha Touch is the way to go, simply because of its extensive library and functionality.

In order to learn Sencha Touch to an acceptable level, I have decided that I'm going to try and create something similar to the Facebook Mobile Application (not for release obviously, just for my own learning). While I have found the Kitchen Sink demos and tutorials very useful, I have hit a bit of a hurdle with creating a 'dashboard' style Panel in Sencha Touch.

My question, in short, is how would I go about creating a simple 3x3 icon grid which can act as a dashboard for my application? Here's a shot of the Facebook sample that I'm trying to replicate:



As far as I can tell, it would be possible to create this using a combination of vbox and hbox components, but I don't fully understand how to create complex layouts in Sencha Touch just yet. Ideally, I would like the generated dashboard to be extensible, so would be looking to define the items for the dashboard in an array, something similar to:

Code:
var dashboardItems = [
    { title: 'News Feed', icon: '../icons/dashboard/newsfeed.png', handler: function() { alert('blah'); } },
    { title: 'Profile', icon: '../icons/dashboard/profile.png', handler: function() { alert('blah2'); } },
    { title: 'Friends', icon: '../icons/dashboard/friends.png', handler: function() { alert('blah3'); } }
];
Any help with creating something along these lines would certainly be most gratefully received indeed.

Thanks,
Ben.