I'm trying to put 100 images (50x50pixels) in a panel that is 500x500pixels. I want 10 images per line, right next to one another, filling up the entire panel. I've been stuck for 2 days on this, and would really appreciate help. The code as follows:

note: i've also tried with a 10x10 array, listing each row as a different item with vbox, but it didn't work. thank you in advance for any help!

App.data.Images = new Array(); //I put all the images into an array
for (var i=0; i<100; i++){ //One by one, fill the array
App.data.Images[i] = new Ext.Panel({
width: 50,
height: 50,
style: 'background-color: #ff0000; border: thin solid blue;' //for simplicity here, just using solid colors instead of images
)};
};

App.views.ImageContainer = new Ext.Panel({ //The container, sized to hold 100 images
width:500px,
height:500px,
items:[App.views.ImageGrid]
});
App.views.ImageGrid = new Ext.Panel({
layout: ????? //I haven't been able to get any layout to work
items: [App.data.Images]
});