PDA

View Full Version : Disappearing items in Ext.form.Panel in Chrome web browser



jastako
28 Nov 2012, 8:13 AM
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
30 Nov 2012, 8:10 AM
The code you have here should work fine, shouldn't be any reason for anything.

jastako
30 Nov 2012, 2:20 PM
I thought so. This is even more strange, as Ext.form.Panel inherits directly from Ext.Panel.

the_Chameleon
30 Nov 2012, 2:39 PM
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
1 Dec 2012, 2:19 AM
Thanks for info! If find any workaround (other than using Ext.Panel instead), will let you know.

the_Chameleon
1 Dec 2012, 7:03 AM
try vbox layout :



config:
layout:'vbox',
items: \

and set flex for the second item :


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