Extjs 6.2.0 List不显示在IOS上,defaultType作为自定义ListItem

时间:2016-11-25 14:57:35

标签: javascript ios extjs extjs6 extjs6-modern

我正在尝试将sencha touch升级到Extjs-6.2 Modern,我的List项目不会显示在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截图enter image description here

1 个答案:

答案 0 :(得分:0)

得到了Sencha工程团队的回复

添加此css

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

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