PDA

View Full Version : List doesnt update layout on orientation change



ForAllThat
19 Oct 2011, 12:36 AM
I have a simple list with some items in it. It work perfectly when the orientation is set before showing the list. But if the orientation changes while showing the list(or if it's already loaded) then the list sort of breaks. The layout doesn't update properly and the right space becomes unusable. (See screenshots).



var testStore = new Ext.data.Store({
fields: ['id', 'warehouse', 'name', 'description'],
data: [
{ id: 1, warehouse: 'Magazijn Iepenburg', name: 'Materiaal 1', description: '10 meter' },
{ id: 2, warehouse: 'Magazijn Verheenlaan', name: 'Materiaal 2', description: '2x meenemen' }
]
});


App.views.TaskMaterials = Ext.extend(Ext.Panel, {
items: [{
xtype: 'fieldset',
title: 'Materialen',
id: 'taskmaterials',
cls: 'information-view',
items:
[{
xtype: 'list',
disableSelection: true,
id: 'materiallist',
scroll: 'vertical',
flex: 1,
itemTpl: new Ext.XTemplate([
'<div class="materials-container">',
'<div class="materials-label">',
'Magazijn:',
'</div>',
'<div class="materials-value">',
'{warehouse}',
'</div>',
'</div>',
'<div class="materials-container">',
'<div class="materials-label">',
'Materiaal:',
'</div>',
'<div class="materials-value">',
'{name}',
'</div>',
'</div>',
'<div class="materials-container">',
'<div class="materials-label">',
'Beschrijving:',
'</div>',
'<div class="materials-value">',
'{description}',
'</div>',
'</div>',
]),
store: testStore,
cls: 'form-field-container'
}]
}]
});


Ext.reg('TaskMaterials', App.views.TaskMaterials);


2874028741

ForAllThat
23 Oct 2011, 10:29 PM
Bump? Still not fixed :(

myput
23 Oct 2011, 11:39 PM
Hey, i found this link the other day,
http://www.developria.com/2010/11/making-orientation-aware-apps.html

you can maybe pass by setOrientationChange, and define a precise size of the list with (width: 300px,)
and other size for portrait in orientation change etc ...

Hope this helps

Cybjorg
26 Oct 2011, 8:58 AM
I'm having the same problem, and I'd rather not be forced to set hard-coded widths.

ForAllThat
30 Oct 2011, 11:22 PM
I fixed it eventually, by adding a orientation change handler, and setting the width with percentages..