PDA

View Full Version : [CLOSED] x-list-parent not redrawing on orientation change



juniorplenty
26 Aug 2011, 12:46 PM
Sencha Touch version tested:

1.1.0


default sencha CSS and JS, with inline clown-color CSS below
Platform tested against:

Android 2.2
Description:

After initial page render, the x-list-parent (and below) components do not re-draw to adjust to the new width, despite being in a "fullscreen" container. When the list itself is made "fullscreen", the behavior is correct. This runs counter to the following, from the Ext.List Sencha Touch documentation:
layoutOnOrientationChange (http://www.tixelated.com/sencha/source/Component.html#cfg-Ext.Component-layoutOnOrientationChange) : Boolean Set this to true to automatically relayout this component on orientation change. This property is set to true by default if a component is floating unless you specifically set this to false. Also note that you dont have to set this property to true if this component is a child of a fullscreen container, since fullscreen components are also laid out automatically on orientation change.
Note: explicitly layoutOnOrientationChange = true has no effect
Test Case:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html;charset=UTF-8' />
<link rel='stylesheet' type='text/css' href='/sencha-touch.css' /><!-- standard sencha css -->
<script type='text/javascript' src='/js/lib/sencha/touch/sencha-touch.js'></script><!-- standard sencha 1.1.0 js -->
<style type="text/css">/* CSS to clown-color elements */


.x-list { background-color: orange !important; }
.x-list-parent { background-color: green !important; }
.x-list-item { background-color: blue !important; }
.x-list-item-body { background-color: red !important; }


</style>
<script type='text/javascript'>


Ext.regApplication({
name: 'app'
, autoInitViewport : true
, launch: function(){app.viewport.doComponentLayout();app.viewport.show();}
});


Ext.regModel('Contact',{fields:['firstName']});


app.store = new Ext.data.JsonStore({
model : 'Contact'
, data: [{firstName: 'Tommy'}]
});


app.viewport = new Ext.Panel({
fullscreen:true
, items : [
new Ext.List({
itemTpl:'{firstName}'
, store:app.store


// UNCOMMENT TO FIX LAYOUT ON ORIENTATION CHANGE
// , fullscreen:true
})
]
});


</script>
</head>
<body></body>
</html>


See this URL : http://m.tixelated.com/test.html
(http://m.tixelated.com/test.html)
Steps to reproduce the problem:

see sample html page, and adjust for sencha js/css paths. Remove the noted line to fix the problem (although this won't work for standard usage.)
the list components have been colored to be easily identifiable. On orientation change from portrait to landscape, you'll see that the x-list (orange) expands, but nothing else does. (The same behavior occurs going from landscape->portrait, but the components stay stretched.)
The result that was expected:

correct redraw of all list components
The result that occurs instead:

x-list-parent doesn't expand or contract to reflect the new orientation
Screenshot or Video:

none
Debugging already done:

this is the minimum code required to reproduce the error
Possible fix:

not provided

mike.estes
26 Aug 2011, 2:59 PM
your app.viewport definition is missing the layout setting, as it only has one direct child you probably want to specify a 'fit' layout.

juniorplenty
26 Aug 2011, 3:58 PM
Ok - submitting a new example that includes a layout but exhibits the same (buggy) behavior:
<!DOCTYPE html><html> <head> <meta http-equiv='content-type' content='text/html;charset=UTF-8' /> <link rel='stylesheet' type='text/css' href='/sencha-touch.css' /><!-- standard sencha css --> <script type='text/javascript' src='/js/lib/sencha/touch/sencha-touch.js'></script><!-- standard sencha 1.1.0 js --> <style type="text/css">/* CSS to clown-color elements */.x-list { background-color: orange !important; }.x-list-parent { background-color: green !important; }.x-list-item { background-color: blue !important; }.x-list-item-body { background-color: red !important; } </style> <script type='text/javascript'>Ext.regApplication({ name: 'app' , autoInitViewport : true , launch: function(){app.viewport.doComponentLayout();app.viewport.show();}});Ext.regModel('Contact',{fields:['firstName']});app.store = new Ext.data.JsonStore({ model : 'Contact' , data: [{firstName: 'Tommy'}]});app.viewport = new Ext.Panel({ fullscreen:true , items : [ new Ext.List({ itemTpl:'{firstName}' , store:app.store // UNCOMMENT TO FIX LAYOUT ON ORIENTATION CHANGE // , fullscreen:true }) ]}); </script> </head> <body></body></html>

juniorplenty
26 Aug 2011, 3:59 PM
Er - you can just view it here: http://m.tixelated.com/test.html