Extjs 6.2.0 List 不显示在 IOS 上，默认类型为自定义 ListItem

Posted 2023-03-14

【中文标题】Extjs 6.2.0 List 不显示在 IOS 上，默认类型为自定义 ListItem

【英文标题】：Extjs 6.2.0 List is not displayed on IOS with defaultType as custom ListItem

【发布时间】：2016-11-25 14:57:35

【问题描述】：

我正在尝试将 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截图

【参考方案1】：

得到了 Sencha 工程团队的回复

添加这个 CSS

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

现在它在 ios 和 chrome 中都可以正常工作