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 : 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:

Code:

<!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

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:

Code:

<!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

x-list-parent not redrawing on orientation change

Thread Tools

Search Thread

Display

x-list-parent not redrawing on orientation change

x-list-parent not redrawing on orientation change

new example w/layout, same bug

new example w/layout, same bug

Tags for this Thread