Results 1 to 4 of 4

Thread: Internet Explorer 10, can't render List with itemTpl

    Looks like we cannot reproduce this. Please provide another test case to reproduce this issue.
  1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    4

    Default Internet Explorer 10, can't render List with itemTpl

    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?
    Code:
    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("")
                }
            ]
        }
    });

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    This rendered for me:

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

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Apr 2013
    Posts
    4

    Default

    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.
    Code:
             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}'
                        }  
                      ]
                   }
                ]
             });

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    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.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •