0

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 screenshotsenter image description here

4

1 回答 1

0

得到了 Sencha 工程团队的回复

添加这个CSS

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

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

于 2016-12-08T07:38:23.757 回答