IE 10 touch 2.2 : can't render dataview inside a container

[kbenkhalifa]

Hi,
I have a DataView component into a Container. the content of my DataView is correctly displayed with Chrome and Safari but not with IE 10.
is there any problem with my code ?

REQUIRED INFORMATION

Code :

• Sencha Touch 2.2.0

Browser versions tested against:

• IE10
• Chrome 27
• Safari 4

Description:

• DataView into container does not appear with IE10.

Steps to reproduce the problem:

• create an mvc application
• put a Ext.dataview.DataView into Ext.Container

The result that was expected:

• content of DataView displayed with all browsers

The result that occurs instead:

• The content of the DataView does not display with IE10

Test Case:

// MyContainer.js
    Ext.define('IE10.view.MyContainer', {
    extend: 'Ext.Container',
    alias: 'widget.myContainer',
    xtype: 'myContainer',

    requires: ['IE10.view.MyDataView'],

    config: {
        layout: 'vbox',
        scrollable: false,
        height: '100%',
        items:[
            {
                xtype: 'toolbar',
                docked: 'top',
                items:[
                    {xtype: 'button', text : 'some text'},
                    { xtype: 'spacer' },
                    {xtype: 'button', text: '11/20'}
                ]
            },
            {
                xtype: 'myDataView'
            }
        ]
    }
})

// MyDataView.js
    Ext.define('IE10.view.MyDataView', {
        extend: 'Ext.dataview.DataView',
        requires: ['Ext.XTemplate'],
        alias: 'widget.myDataView',
        xtype: 'myDataView',
        config: {
            flex: 1,
            html: 'text to display'
        }
    })

[mitchellsimoens]

Thanks for the report! I have opened a bug in our bug tracker.

[rhirst]

I'm having the same problem (no content in dataviews nested within containers on IE10), although I have noticed in my application that when the browser is resized the content suddenly appears.

I've tested the above example and resizing the browser doesn't have the same effect (content still not visible), I'll post back if I isolate the difference in my application that causes resize to make the content appear.

[kbenkhalifa]

I found what goes wrong.
It comes from the scrollable config in MyContainer view. Removing this config resolves the issu.

Hope that helps.

[koujiid]

I faced the same problem.
I want to repair the problem.
If I want to escape the problem , what should I do ?

[kbenkhalifa]

In the example above, you have to remove the property scrollable from the config of MyContainer.js.
So just remove this line :
scrollable: false,

Regards

[koujiid]

Thank you your reply.

I could repair my dataview.
This problem is repaired by uncommenting the scrollable config.

Thank you.

[faustoct]

i'm facing the problem, does anyone fix it? I cannot remove scroll , it might have scrollable true.

[faustoct]

add inside a container. set container height in dataview load listener worked for me.