Internet Explorer 10, can't render List with itemTpl

[mogavero]

Hi, I'm looking for confirmation on if this is an issue or not. I can get the list to display in Chrome but not in IE 10. I used the generic list example from the site as follows and I can't see the list in IE 10. Am I just missing a configuration item?

Ext.define('TestApp.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
        'Ext.TitleBar'
    ],
    config: {
        tabBarPosition: 'bottom',


        items: [
            {
                title: 'Welcome',
                iconCls: 'home',
                styleHtmlContent: true,
                scrollable: true,
                layout: {type: 'vbox' },
                items: [
                  {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Welcome to Sencha Touch 2'
                  },
                 {
                     xtype: 'list',
                     width: 400,
                     flex: 1,
                     store: {
                         fields: ['name'],
                         data: [
                             {name: 'Cowper'},
                             {name: 'Everett'},
                             {name: 'University'},
                             {name: 'Forest'}
                         ]
                     },
                     itemTpl: '{name}'
                 }                
                ],
                html: [
                    "You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
                    "contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
                    "and refresh to change what's rendered here."
                ].join("")
            }
        ]
    }
});

[mitchellsimoens]

This rendered for me:

Ext.Viewport.add({
    xtype   : 'list',
    itemTpl : '{name}',
    store   : {
        fields : ['name'],
        data   : [
            { name : 'Cowper'     },
            { name : 'Everett'    },
            { name : 'University' },
            { name : 'Forest'     }
        ]
    }
});

[mogavero]

Thank you for following up. Yes, your example works for me too. I did some further testing and found that adding the 'scrollable' config option causes it not to render for me.

         Ext.Viewport.add({
            xtype : 'tabpanel',
            items: [
               {
                  title  : 'Welcome',
                  iconCls: 'home',  
                  layout: { type: 'vbox' },
                  styleHtmlContent: true,
                  scrollable: true,
                  items: [
                    {
                        xtype: 'list',
                        flex: 1,
                        store: {
                            fields: ['name'],
                            data: [
                                {name: 'Cowper'},
                                {name: 'Everett'},
                                {name: 'University'},
                                {name: 'Forest'}
                            ]
                        },
                        itemTpl: '{name}'
                    }  
                  ]
               }
            ]
         });

[mitchellsimoens]

In that code you don't want the list's parent to be scrollable because the list is always going to be scrollable so you have 2 scrollable containers and it will produce odd interactions. Also, if you were to inspect the DOM you will probably notice the size issues where it may have a height but not a width or the other way around. Just because it's not visible doesn't mean it's not rendered.