PDA

View Full Version : ShowBy with Flexed panels and a box layout popup is slow.



badgerb1
9 May 2012, 1:09 PM
Hi Guys,

OK found an interesting one.

If you have a popup of any kind that you want to use showby with (for example the popup list for a selectfield). If the panel the selectfield is in is flexed and there is no width or height set on the outermost panel, the popup will be very slow (clocked over 10 sec on an iPAD).

If you instead either, set a percentage or fixed width instead of flexing the panel, or if you set a width and height on the outermost panel, the showby is very fast. This seems to be worse with more components on the screen so you may not see much difference with this example below, but add a few more controls and you should start to see a difference.

{xtype:'viewport',
//Note no width set.
layout:'fit',
items:[
{
xtype:'container',
layout:'hbox',
items:[
{xtype:'container',
layout:'vbox',
flex:1,//here's the problem
items:[
{
xtype:'selectfield',
options://50 options or so like a list of states
}
]
},
{
xtype:'container',
layout:'vbox',
flex:1,
items:[//some items]
}
]
}
]
}

Option 1:
Set a width and height on the outermost container
{xtype:'viewport',
width:window.innerWidth,
height:window.innerHeight,
layout:'fit',
items:[
{
xtype:'container',
layout:'hbox',
items:[
{xtype:'container',
layout:'vbox',
flex:1,//here's the problem
items:[
{
xtype:'selectfield',
options://50 options or so like a list of states
}
]
},
{
xtype:'container',
layout:'vbox',
flex:1,
items:[//some items]
}
]
}
]
}

Option 2:
Use a width instead of flex.
{xtype:'viewport',
//NOTE no width or height
layout:'fit',
items:[
{
xtype:'container',
layout:'hbox',
items:[
{xtype:'container',
layout:'vbox',
width:'50%'
items:[
{
xtype:'selectfield',
options://50 options or so like a list of states
}
]
},
{
xtype:'container',
layout:'vbox',
width:'50%'
items:[//some items]
}
]
}
]
}

badgerb1
9 May 2012, 1:11 PM
Oh and if you change the selectfield (extend or override) to not do a showby and just pop the list in the middle of the screen it's fast again as well.