Need to make an app like Facebook Android App

[misrasandeep]

Trying to build an app which has home screen similar to Facebook app for Android. Which looks like there
is a 3X3 grid of large icons,clicking on which take to that action screen.
I am trying to figure out what layout will be best for this kind of screen.
Can someone please suggest ?
Here is the URL for the image http://iphone.appstorm.net/wp-conten...-interface.png

[mitchellsimoens]

have 9 items. In CSS each item has width of 33% and float: left

[misrasandeep]

Did something like the code below. That is created Vbox-HBox containers to fit 9 images.
Hooked listeners on each image in controller through 'control'.
Now my problem is that when user clicks on the image , listener is called but it is a bit slow and in that time user is not shown any sign that the image is clicked(that is like an list item when clicked changes its background to let user know that it ws clicked). Is there any config for xtype='image' ,by which we can achieve this effect?

/**

 * View which contains all the jobs returned
 * to the user search criteria.
 */
Ext.define('Mh.view.Homepage', {
    extend: 'Ext.Container',
    xtype: 'homepagecard',
    config: {
    layout:'vbox',
    title:'H',
        items: [
            {xtype:'toolbar',
        //Definition of the top docked toolbar
                docked: 'top',
                items: [
                            {xtype:'spacer'},
                            {
                                xtype:'searchfield',
                                name: 'search',
                                placeHolder: 'Search Job',
                                listeners:{
                                    action:function(obj,e,opts){
                                    jbstore = Ext.getCmp('jlist').getStore();
                                    jbproxy = jbstore.getProxy();
                                    //All the code below is workaround to 
                                    //bypass the serverside call , two files named 
                                    //manager.json and architect.json mock the search result
                                    jbproxy.url='jobs/'+obj.getValue()+'.json';
                                    //jbproxy.setExtraParam('title',obj.getValue());
                                    jbstore.load({url:'jobs/'+obj.getValue()+'.json'},{
                                            callback: function(records, operation, success) {
                                                console.log(records);
                                            },
                                            scope: this
                                        });
                                    }
                                }
                                
                            },
                            {xtype:'spacer'}
                ]
            },
            {
                xtype: 'container',
                layout: {
                    type: 'hbox'
                },
                flex: 1,
                items: [
                    {
                        xtype: 'container',
                        layout: {
                            type: 'vbox'
                        },
                        flex: 1,
                        items: [
                            {
                                xtype: 'container',
                                flex: 4,
                                items: [
                                    {
                                        xtype: 'image',
                                        centered: true,
                                        height: 60,
                                        width: 60,
                                        src: 'resources/icons/find_a_job.png',
                                        id:'imgFindJob'
                                    }
                                ]
                            },
                            {
                                xtype: 'container',
                                html: 'Find Job',
                                style: 'text-align:center;',
                                flex: 1
                            }
                        ]
                    },
                    {
                        xtype: 'container',
                        layout: {
                            type: 'vbox'
                        },
                        flex: 1,
                        items: [
                            {
                                xtype: 'container',
                                flex: 4,
                                items: [
                                    {
                                        xtype: 'image',
                                        centered: true,
                                        height: 60,
                                        width: 60,
                                        src: 'resources/icons/edit_contact_details.png',
                                        id:'imgEditCont'
                                    }
                                ]
                            },
                            {
                                xtype: 'container',
                                html: 'My Account',
                                style: 'text-align:center;',
                                flex: 1
                            }
                        ]
                    }
                ]
            },
            {
                xtype: 'container',
                layout: {
                    type: 'hbox'
                },
                flex: 1,
                items: [
                    {
                        xtype: 'container',
                        layout: {
                            type: 'vbox'
                        },
                        flex: 1,
                        items: [
                            {
                                xtype: 'container',
                                flex: 4,
                                items: [
                                    {
                                        xtype: 'image',
                                        centered: true,
                                        height: 60,
                                        width: 60,
                                        src: 'resources/icons/job_basket.png',
                                        id:'imgJobBasket'
                                    }
                                ]
                            },
                            {
                                xtype: 'container',
                                html: 'Job Basket',
                                style: 'text-align:center;',
                                flex: 1
                            }
                        ]
                    },
                    {
                        xtype: 'container',
                        layout: {
                            type: 'vbox'
                        },
                        flex: 1,
                        items: [
                            {
                                xtype: 'container',
                                flex: 4,
                                items: [
                                    {
                                        xtype: 'image',
                                        centered: true,
                                        height: 60,
                                        width: 60,
                                        src: 'resources/icons/alerts.png',
                                        id:'imgAlerts'
                                    }
                                ]
                            },
                            {
                                xtype: 'container',
                                html: 'Alerts',
                                style: 'text-align:center;',
                                flex: 1
                            }
                        ]
                    }
                ]
            },
            {
                xtype: 'container',
                layout: {
                    type: 'hbox'
                },
                flex: 1,
                items: [
                    {
                        xtype: 'container',
                        layout: {
                            type: 'vbox'
                        },
                        flex: 1,
                        items: [
                            {
                                xtype: 'container',
                                flex: 4,
                                items: [
                                    {
                                        xtype: 'image',
                                        centered: true,
                                        height: 60,
                                        width: 60,
                                        src: 'resources/icons/job_rss _feed.png',
                                        id:'imgRssFeed'
                                    }
                                ]
                            },
                            {
                                xtype: 'container',
                                html: 'Job RSS',
                                style: 'text-align:center;',
                                flex: 1
                            }
                        ]
                    },
                    {
                        xtype: 'container',
                        layout: {
                            type: 'vbox'
                        },
                        flex: 1,
                        items: [
                            {
                                xtype: 'container',
                                flex: 4,
                                items: [
                                    {
                                        xtype: 'image',
                                        centered: true,
                                        height: 60,
                                        width: 60,
                                        src: 'resources/icons/contact_h.png',
                                        id:'imgContactH'
                                    }
                                ]
                            },
                            {
                                xtype: 'container',
                                html: 'Contact Us',
                                style: 'text-align:center;',
                                flex: 1
                            }
                        ]
                    }
                ]
            }
            ]
        }
});