Extjs 6.2.0 列表未显示在 IOS 上，默认类型为自定义 ListItem

Question

我正在尝试将 sencha touch 升级到 Extjs-6.2 Modern，我的列表项未显示在 iOS safari 和 iOS 模拟器和 inApp-webkit 视图中，我正在使用 Extjs -6.2.0.103，在我的自定义 ListItem 中设置项目高度后显示项目，但它在没有项目高度的 ext 6.0.2 中工作，它也在 windows chrome iPhone6 模拟器，我是不是漏了什么？

我的列表可能有可变的行高，所以我无法固定项目的高度，而且 ui 是由我无法控制的 CodeGenerators 生成的。

    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 屏幕截图

Answer 1

得到 Sencha 工程团队的回复

添加这个 css

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

现在它在 ios 和 chrome

中工作正常

Extjs 6.2.0 列表未显示在 IOS 上，默认类型为自定义 ListItem

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

javascript

ios

extjs

extjs6

extjs6-modern