Disappearing items in Ext.form.Panel in Chrome web browser

[jastako]

Hi,

So I found this bit strange behaviour, when implementing view, which inherits from 'Ext.form.Panel'. On mobile device (and also likely on emulator) it will work fine, but during development, I'm testing code against Chrome browser, as it is way more productive than deploying an *.apk over USB to device. So when I'm on Chrome, and switch Chrome Tab to some other site, and then come back to my app (in Chrome Tab), all the Ext.form.Panel items seem disappear, except toolbar, which is docked in the top.

Any ideas?

This is a code (CoffeeScript):

Ext.define 'MyView',
  extend: 'Ext.form.Panel'
  alias: 'widget.myview'

  config:
    items: \
    [
      {
        xtype: 'titlebar'
        docked: 'top'
        title: 'Some title'
        items: \
        [
          {
            xtype: 'button'
            ui: 'back'
            text: 'Back' # TODO: i18n
            align: 'left'
            handler: ->
              this.fireEvent 'back'
          }
          {
            xtype: 'button'
            iconCls: 'search'
            iconMask: true
            align: 'right'
            handler: ->
              Ext.Msg.alert 'You pressed me'
          }
        ]
      }
      {
        xtype: 'fieldset'
        title: 'Set itinerary details'
        items: \
        [
          {
            xtype: 'textfield'
          }
          {
            xtype: 'textfield'
          }
        ]
      }
    ]

[mitchellsimoens]

The code you have here should work fine, shouldn't be any reason for anything.

[jastako]

I thought so. This is even more strange, as Ext.form.Panel inherits directly from Ext.Panel.

[the_Chameleon]

When i had developped my first application, this bug happened every time!
It's coming from the positioning of the components.
Try changing the layout of your panel.


I advise you to try on several AVD because this bug also occurs on the tall or small screens.


Good luck

[jastako]

Thanks for info! If find any workaround (other than using Ext.Panel instead), will let you know.

[the_Chameleon]

try vbox layout :

config:
layout:'vbox',
    items: \

and set flex for the second item :

xtype: 'fieldset'
flex:1
 title: 'Set itinerary details'