Hello all,

Im new to Ext and am trying to learn the language by building an website.
So far ive managed to solve most problems i ran into but there is one thing i cant get fixed.
Im trying to use an Dataview in an Hbox panel and it works fine in FF and Chrome but for some reason the dataview wont render in IE8 or IE9.

I dont get any errors as far as i can see and the code has no problems when i run it through JSlint.com
Anyone knows what im doing wrong here?
www.websoul.nl is the site im working on.

his is part of the code im using to display the dataview.

Code:
    var reader = new Ext.data.JsonReader({}, [
       {name: 'armorName'},
       {name: 'armorType'},
       {name: 'source'},
       {name: 'race'},
       {name: 'gender'},
       {name: 'weight'},
       {name: 'link'},
       {name: 'level'},
       {name: 'rarity'},
       {name: 'defence'},
       {name: 'toughness'},
       {name: 'vitality'},
       {name: 'power'},
       {name: 'precision'},
       {name: 'condDamage'},
       {name: 'critDamage'},
       {name: 'healing'},
       {name: 'magicfind'}
    ]);
    // get the data
    var proxy = new Ext.data.HttpProxy({
        url: 'armordatabase.json', 
        method: 'GET'
    });
        
    // create the data store.
    var store = new Ext.data.Store({
        reader: reader,
        proxy: proxy,
        sortInfo: {
            field    : 'armorName',
            direction: 'ASC'
        }
    });
    store.load();
    
    var armortpl = new Ext.XTemplate(
            '<table><tr>',                
                '<tpl for=".">',
                    '<td style="padding:5px;">',
                        '<div id={#} align="center" STYLE="background-color:{[this.armorrarity(values.rarity)]}">{armorType}</br>',
                        'level: {level}',
                        '<img width="300" height="500" src="{source}" /></div>',
                    '</td>',
                '</tpl>',
            '</tr></table>',
            {
               armorrarity: function(rarity) {
                    //console.log(this.rarity);
                    var armorRarityColor = '#ffffff';
                    if (rarity === 'fine'){armorRarityColor = '#4f9dfe';}
                    else if (rarity === 'masterwork') {armorRarityColor = '#2dc50e';}
                    else if (rarity === 'rare') {armorRarityColor = '#ffe51f';}
                    else if (rarity === 'exotic') {armorRarityColor = '#fda500';}
                    else if (rarity === 'legendary') {armorRarityColor = '#a02ef7';}
                    return armorRarityColor;
                }
            }
    );
    var armorDataview = new Ext.DataView({
        id: 'armorDataview',
        store: store,
        singleSelect: true,
        multiSelect: false,
        autoHeight: true,
        emptyText: 'No armor avaiable',
        tpl: armortpl
    });


var armorPanel = new Ext.Panel({
    title: 'Armors',
    layout: 'HBox',
 layoutConfig: {
  align : 'stretch',
  pack  : 'start'
 },
    items: [
 filterFormContainer,
    {
        xtype: 'panel',
        title: 'Armor images',
        width: 750,
        autoScroll: true,
  border: true,
        items: [
           armorDataview
        ]
    },
    {
        xtype: 'panel',
        id: 'armorSpecsPanel',
        title: 'Armor specifications',
  border: true,
        width: 250
    }]
});