How to fill viewport with images in grid

Ext.define('MyAppp.view.AdsDataItem', {

extend: 'Ext.dataview.component.DataItem',

alias: 'widget.AdsDataItem',

requires: [

'Ext.Img'

],

config: {

padding: 10,

width: '30%',

defaults: {

margin: 5

},

items: [

{

xtype: 'image',

height: 201,

width: 201,

src: 'resources/images/weeklyads/lays.jpg'

}

]

},

updateRecord: function(record) {

var me = this;

me.down('image').setSrc(record.get('image'));

me.callParent(arguments);

}

});

Here is my DataItem component and i'm fetching the images from store.

I need to fill the viewport with 3x3 grid or thumbnails view, please suggest the method to achieve this.