Grid view like icons in iPhone/iPod touch home screen

[Naveen Kumar D]

Hello All,

I need to make UI look like having a grid (like apps are displayed in iPhone/iPod touch), I have looked at Ext.gridView, but did not get much info how to do that. Can anyone help me in implementing this.

Many Thanks,
Naveen

[pasinski]

Hi there.

Did you have any success in building this layout? I'm doing something similar.

[Hanni Sullivan]

Here is my approach I'm using for this scenario (It was not my idea, somebody posted it here)

Example.View.iPodGridDataView = Ext.extend(Ext.DataView, {
    initComponent: function () {
        var config = {
            store: new Example.Store.iPodGrid(),
            tpl: Example.Template.iPodGrid,
            autoHeight: true,
            multiSelect: false,
            itemSelector: 'div.ipodgrid-wrapper',
            scroll: true
        };

        Ext.apply(this, config);
        Example.View.iPodGridDataView.superclass.initComponent.apply(this, arguments);
        this.on('itemtap', this.itemTapHandler, this);
    },
   
    itemTapHandler: function (view, index, item, event) {       
       // Your code here!
    }
});

Example.Template.iPodGrid = new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="ipodgrid-wrapper">',
                '<div class="icon-wrapper">',
                    '<img src="resources/images/{Icon}" alt="{Text}" />',
                '</div>{Text}',
            '</div>',
        '</tpl>'
);

Ext.regModel('iPodGrid', {
    fields: ['Text', 'Icon']
});

and the CSS:

.ipdodgrid-wrapper{
    padding: 15px;
    float: left;
    width: 100px;
    font-size:  0.8em;
    font-weight: bold;
    text-align: center;
    height: 80px;
    opacity: 1;
}

[Corundum]

In order to render this, would it be necessary to call it within an ext.panel?

I'm new at this, and would appreciate any help at all in implementing the given example.