List not showing up on Android 2.3

[zombeerose]

REQUIRED INFORMATION


Ext version tested:

• Ext 4.1.3

Browser versions tested against:

• Chrome 25 - works
• IE9 - works
• Android 4.2 - works
• Android 2.3 - fails

Description:

• The panel will not render correctly on Android 2.3

Steps to reproduce the problem:

• Run the code.

The result that was expected:

• A horizontal layout with two fields and one button.

The result that occurs instead:

• The panel and components are not sized correctly and are inaccessible.

Test Case:

Ext.create('Ext.panel.Panel', {
    layout:'border',
    flex:1,
    height:200,
    items:[{
        region:'center',
        activeItem: 0,
        items: [{
            items: [{
                items: [{
                    fieldLabel: 'First',width: 200,xtype: 'textfield'
                },{
                    fieldLabel: 'Second',width: 200,xtype: 'textfield'
                },{
                    text: 'Click',xtype: 'button'
                }],
                layout: 'hbox',
                xtype: 'fieldcontainer'
            }],
            xtype: 'form'
        }],
        layout: 'card',
        xtype: 'panel'
    }], 
    renderTo: Ext.getBody()
});

...
Yes, I know this is a "touch" forum/bug but it's also failing in ExtJS so there.

[B.W.]

I'm also getting this problem. Upgraded from Sencha Touch 1.0 to 2.1 and suddenly any modal Panel with a List on it gets blanked out (70% of the time). The whole app works flawlessly on Desktop Chrome and Safari, but not on Android nor Apple tablets. Adding content via setHtml onInitialize via Ajax request seems to populate the panel, but adding a loading mask breaks it again (and it's still not a proper List element). Flipping between tabs on independent tabpanels seems to fix the problem 80% of the time. Tried:
- this.doLayout() on initialize of Panel, creation of Panel
- this.refresh() on initialize of Panel, creation of Panel, originating Panel
- height:'100%', height:'400', etc to everything
- layout:'fit',layout:'vbox',layout:'hbox',layout:'card'
- 'Ext.create' Panel instead of 'new' Panel
- creating and adding List on initialize, show of Panel
- adding data to List on initialize, show of Panel
- adding zIndex to everything
- adding flex to everything
- bare bones Panel with List with 1 element on it
- removing setTitles, storeFilters, animations
- this.getScrollable().getScroller().refresh()
- overriding Ext.Dataview.refresh to force scroller to scroll to the top always
- .x-tabbar > * {z-index:1;position:relative} addition in CSS
- scrollable:true, scrollable:false to List, underlaying Panel and vice versa, etc
- changing underlaying Panel to xtype:'container'
- absolute positioning of list (top:0,bottom:0,left:0,right:0)

...little help?

[B.W.]

Add "indicator:false" to the loadmask config of the modal panel (removes the animation and also speeds everything up) and do the unmask onPainted listener. Inside lists will always show up.

ie)

Ext.Viewport.add({
  xtype:'panel',
  height:400,
  width:600,
  modal:true,
  layout:'vbox',
  scrollable:false,
  masked:{
    xtype:'loadmask',
    indicator:false,
    message:'My Loading Message'
  },
  listeners:
  {
    painted:function(){
     this.unmask();
    }
  },
  items:[
    {
        //Some items
    }
  ]
};

[alile]

Same issue here, seen in Android 4.0 using ST 2.0.

Exact same phonegap package works fine in iPhone (6.1.3). Also works fine in desktop and phone browsers.

The issue seems to be that the list items are not visible. If I tap on the screen where the item would be, it correctly handles the tap (goes to the correct location based on that index). A split-second after the tap, the list appears, and thereafter seems fine.

There a couple of other views that are seen before this (login, etc) so the list is not the first thing showing.

[Erwan62]

I'm having the same issue on my lists : works fine on Android 4.1.2 and iOS, but rendering problems occur on Android 2.3.2. It's a bit annoying since Android 2.3.x stands for about 40% of the devices on the market...

Is there a workaround, or something like this ?

[alile]

I did solve it, but it is not terribly elegant. I am using a list inside an Ext.navigation.View (may or may not matter). I found that if i filtered and de-filtered that i could get the desired list to show. It does result in an initial slide in animation for other devices (because i use animateActiveItem after applying the filter), but it does not look bad. I tried hiding the view, doing the toggle, then showing it, but that did not work. In the below, handleFilterChangeRequest applies a filter to the contents of the view. I apologize for not having a strong solution, but this was fixed my limited case.

setTimeout((function(){
    this.handleFilterChangeRequest("saved")
}.bind(this)), 100);


setTimeout((function()
{
    this.handleFilterChangeRequest("");
}.bind(this)), 150);

[Erwan62]

I tried filtering and unfiltering the list on several events (initialize, show, etc.), but the problem is still here =/

[alile]

do all the elements have heights? I had to really dig through the markup to find what needed setting. I don't think i properly implemented the layouts to adjust to multiple size displays (if this is even possible, as if the documentation would tell you), and so had to do some hard size setting in the css. I think it was one of the .x-scroll-views inside the list section that needed adjusting. Determining this is a real pita, hopefully you can get it to replicate on a desktop

[ampamo]

I have a possible fix to this problem. I have been put

list.getScrollable().getScroller().scrollTo({x:0,y:1});

in my code after loading store. You don't put 0 to 'y' value, that doesn't work.

[Erwan62]

Thanks for your help guys, but unfortunatly it doesn't fix the bug for me.

I really need to handle multiple screen sizes, so hard coding some heights in the CSS wouldn't be so good for me.

Ampamo's solution doesn't fix my problem too. My store is autoloaded, so I tried placing this code into some events (initialize, show, etc.), but the rendering problem stills here.