Dataview not showing in IE only

[websoul]

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.

    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
    }]
});

[willigogs]

On your live webpage, IE errors at:

SCRIPT1004: Expected ';' 
armor.js, line 274 character 15

Which then points to you not having an equal sign when declaring the store:

var store { // <---NO EQUAL SIGN HERE
        xtype: 'jsonstore',
        autoLoad: true,
        reader: reader,
        storeId: 'armorstore',
        proxy: proxy,
        sortInfo: {
            field    : 'armorName',
            direction: 'ASC'
        }
    };

...but then I see you don't have this same error in the provided code above?

[websoul]

thank you for the quick reply i didnt expect one so soon.

I was still trying lots of things to try and make it work and my live enviroment is my testing ground since the site isnt operational yet, sorry for that.

the live enviroment is back to what it was before and ill just tinker with other parts for now

[willigogs]

Have you tried giving your page a doctype?

<!DOCTYPE html>
<html>
<head>
...etc

I see that the page is reverting into quirks mode when served with IE, but if I force the browser into standards mode for IE8 or IE9, then the page renders correctly. The page does however still fail for IE7, so I'll keep looking for why...

[websoul]

Ive been staring at the dataview every evening this week and could not find anything wrong with it...
Thank you so much for pointing that out it seems that i missed adding that in the index.html

shame on me...

[willigogs]

No worries

It still doesn't render for IE7 and below which I'm struggling to work out why - but I'm not sure if you're wanting to support these earlier browsers anyway?

It happily builds all the components, but just doesn't seem to loop through the template and create the table. I'd probably look at removing all instances of console.log() first, since old versions of IE don't support it and can crash out. If that doesn't resolve it, I'd try removing the additional "armorrarity" object / function from within your template as a first step, just to see if it's able to run through the template without it in IE7...

[websoul]

thank you for looking, i dont think IE7 support will be that big an issue.
the site im working on is for an game and i think most gamers wont have an old version of IE running.