Extjs 6.2.0 List is not displayed on IOS with defaultType as custom ListItem

Question

I'm trying to upgrade sencha touch to Extjs-6.2 Modern, my List items are not displayed in iOS safari & iOS Simulator & inApp-webkit view, I'm using Extjs-6.2.0.103, after setting the item Height in my custom ListItem its displaying the items, but it's working in ext 6.0.2 without item height and also it is working on windows chrome iPhone6 simulator, am i missing anything?

My list may have variable row height so i'm not able to fix the height of the items and also the ui is generated by CodeGenerators which i don't have control.

    Ext.define('MyApp.view.com.TransferListView',{
    extend : 'Ext.Container',
    xtype : 'xtransferlist',

    requires : [
      'MyApp.view.main.MyList'
    ],

    config:{
        layout:'fit',
        height:'100%',
        width:'100%'
    },

    items:[{
        xtype:'mylist',

        itemTpl:'{id}:{name}<br>{loremIpsum}',

        data:[{name:'Data Item', id:1},
        {name:'Data Item', id:2},
        {name:'Data Item', id:3},
        {name:'Data Item', id:4},
        {name:'Data Item', id:5},
        {name:'Data Item', id:6},
        {name:'Data Item', id:7},
        {name:'Data Item', id:8},
        {name:'Data Item', id:9, loremIpsum: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'},
        {name:'Data Item', id:10},
        {name:'Data Item', id:11},
        {name:'Data Item', id:12},
        {name:'Data Item', id:13},
        {name:'Data Item', id:14},
        {name:'Data Item', id:15}]
    }]
});

//List
Ext.define('MyApp.view.main.MyList', {
    extend: 'Ext.List',
    xtype: 'mylist',
    requires:['MyApp.view.main.MyListItem'],
    config:{
        defaultType:'mylistitem',
        useComponent:true,
        //useSimpleItems:true,
    },
    constructor: function(config) {
       // 
        Ext.applyIf(config || {}, {
            //other config option if any
        });
        this.callParent(arguments);
        this.initConfig(config);
        // this.on('painted',function(){
        //     debugger;
        //     this.refresh();
        // });
    }    
});


//ListItem
Ext.define('MyApp.view.main.MyListItem', {
    extend: 'Ext.dataview.ListItem', //extend: 'Ext.dataview.component.ListItem',//(6.0.2-working)
    xtype: 'mylistitem',
    // config:{
    //     minHeight:'100px', 
    //     height:'100px' //displayed after setting height here
    //     layout:'fit'
    // },
    // constructor: function(config) {
    //     
    //     Ext.applyIf(config || {}, {
    //         //other config option if any
    //     });
    //     this.callParent(arguments);
    //     this.initConfig(config);
    // },
});

PFA screenshots

Answer 1

Got a response from the Sencha Engineering Team

Add this css

.x-listitem > :not(.x-heighted) {
    height: auto;
}

Now its working fine in both ios and chrome