Hybrid View

  1. #1
    Sencha User
    Join Date
    Feb 2013
    Posts
    4
    Vote Rating
    0
    websoul is on a distinguished road

      0  

    Default Dataview not showing in IE only

    Dataview not showing in IE only


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

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    544
    Vote Rating
    52
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    On your live webpage, IE errors at:

    Code:
    SCRIPT1004: Expected ';' 
    armor.js, line 274 character 15
    Which then points to you not having an equal sign when declaring the store:

    Code:
    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?

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Posts
    4
    Vote Rating
    0
    websoul is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha User
    Join Date
    Jan 2011
    Posts
    544
    Vote Rating
    52
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    Have you tried giving your page a doctype?

    Code:
    <!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...

  5. #5
    Sencha User
    Join Date
    Feb 2013
    Posts
    4
    Vote Rating
    0
    websoul is on a distinguished road

      0  

    Default


    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...

  6. #6
    Sencha User
    Join Date
    Jan 2011
    Posts
    544
    Vote Rating
    52
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    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...

Thread Participants: 1

Tags for this Thread