PDA

View Full Version : panel redraws not properly after orientation change



YuriSts
29 Apr 2011, 3:51 AM
Platform tested against:


iOS 4



Description:


When we rotate device the following code works not properly. Env is ipad.
1. It takes too much time to redraw
2. Left panel is out of screen after orientation change.





Ext.ns('myprog', 'Ext.ux');



Ext

.setup({

icon : 'image/icon.png',

tabletStartupScreen : 'image/tablet_startup.png',

phoneStartupScreen : 'image/phone_startup.png',

glossOnIcon : false,

onReady : function() {



// left menu

var menuTpl = new Ext.XTemplate('{[this.getTitle(values)]}', {

compiled : true,

getTitle : function(values) {

if (values.ShortTitle) {

return values.ShortTitle;

}

return values.Title;

}

});



Ext.regModel("ProjectModelLeft", {

fields : [ 'Id', 'Title', 'ShortTitle' ]

});



var localStoreLeft = new Ext.data.Store({

model : "ProjectModelLeft",

proxy : {

type : 'localstorage',

id : "ProjectStoreLeft"

},

autoLoad : true,

listeners : {

load : function() {

if (localStoreLeft.getCount() == 0) {

for ( var i = 0; i < 10; i++) {

var shortTitle = "test";

localStoreLeft.add({

'Id' : i,

'Title' : i + shortTitle,

'ShortTitle' : i + shortTitle

});

}

localStoreLeft.sync();

} else {



}

}

}

});



var menuList = new Ext.List({

width : "100%",

height : "100%",

itemTpl : menuTpl,

id : "menuListId",

store : localStoreLeft

});



var leftPanel = new Ext.Panel({

layout : "card",

height : "100%",

width : "20%",

title : "Menu",

hidden : false,

items : [ menuList ]

});



// content panel



Ext.regModel("ProjectModelRight", {

fields : [ 'Id', 'Title', 'Summary' ]

});



var newsTpl = '<div class="news-block"><div
class="news-title">{Title}</div><div
class="news-summary">{Summary}</div><span id="button_{#}"
></span></div>';



var localStoreContent = new Ext.data.Store(

{

model : "ProjectModelRight",

proxy : {

type : 'localstorage',

id : "ProjectModelRight"

},

autoLoad : true,

listeners : {

load : function() {

if (localStoreContent.getCount() == 0) {

for ( var i = 0; i < 2; i++) {

var shortTitle = "short
title short title short title short title short title short title short
title ";

var longSummary = "very long
summary very long summary very long summary very long summary very long
summary very long summary very long summary very long summary very long
summary very long summary very long summary very long summary very long
summary very long summary very long summary very long summary very long
summary very long summary very long summary very long summary very long
summary very long summary very long summary very long summary very long
summary very long summary very long summary very long summary very long
summary very long summary very long summary very long summary very long
summary ";

localStoreContent.add({

'Id' : i,

'Title' : i + shortTitle,

'Summary' : i + longSummary

});

}

localStoreContent.sync();

} else {



}

}

}

});



var listViewContent = new Ext.List({

height : "100%",

scroll : 'vertical',

title : 'News',

id : "listViewId",

itemTpl : newsTpl,

store : localStoreContent

});



var newsContentSourceView = new Ext.Panel({

layout : 'vbox',

scroll : false,

id : "newsContentSourceViewId",

height : "100%",

dockedItems : [ {

dock : 'top',

height : "50%",

items : [ listViewContent ]

} ]

});



var tabNewsContent12 = new Ext.Tab({

scroll : 'vertical',

title : "Title",

id : "tabNewsContent12",

cls : 'NewsContent',

height : "100%",

html : ''

});



var longText = "Content settings... Clear browsing
data...Google Chrome <br/>may use web services to improve your
browsing ex<br/>perience.You may optionally dis<br/>able
these services Learn moreUse a web service to <br/>help resolve
navigation errorsUse a prediction service <br/>to help complete
searches and URLs typed in the<br/> address barUse DNS
pre-fetching to improve page load per<br/>formanceEnable phishing
and malware protectionAutomatically sen<br/>d usage statistics and
crash reports to GoogleWeb ContentFont <br/>size: Customize
fonts...Page zoom: Languages and spell-checke<br/>r settings...
Change Gears settingsNetworkGoogle Chrome is usin<br/>g your
computer's system proxy settings to connect to the
network.Chan<br/>ge proxy settings...TranslateOffer to translate
pag<br/>es that aren't in a language I
readDownloadsDownload<br/> location: Change...Ask where to save
each file bef<br/>ore downloading You have chosen to open certain
file types automa<br/>tically after downloading. Clear
auto-opening settings Security Manage <br/>certificates... Check
for server certificate revocation Use SSL 3.0 Use TLS 1.0<br/>
Google Cloud Print Google Cloud Print lets you access this computer's
printers from anywhere. Sign in to <br/>enable.";

longText+=longText;

longText+=longText;

longText+=longText;

longText+=longText;

tabNewsContent12.update(longText);



newsContentSourceView.insertDocked(1, {

dock : 'bottom',

height : "50%",

dockedItems : [ {

dock : 'top',

xtype : 'toolbar',

id : 'NewsContentToolbar',

items : [ {

text : 'Save News',

handler : function() {

// TODO add news functionality

}

} ]

} ],

items : [ tabNewsContent12 ]

});



var contentPanel = new Ext.Panel({

width : "80%",

height : "100%",

dockedItems : [ {

dock : 'top',

xtype : 'toolbar',

title : 'Noname project'

} ],

items : [ newsContentSourceView ]

});



var mainPanel = new Ext.Panel({

fullscreen : true,

layout : {

type : 'hbox',

align : 'start'

},

items : [ leftPanel, contentPanel ],

listeners : {

orientationchange : function(context, orientation, width,

height) {

leftPanel.doComponentLayout();

contentPanel.doComponentLayout();



if (orientation == "portrait") {





} else if (orientation == "landscape") {



}

}

}

});



mainPanel.show();



}

});

railsjedi
22 May 2011, 1:00 AM
Any solutions to this issue. It's really killing my sencha touch project. Would love to know any workarounds that people have tried.

Thanks

pixelpartner
29 May 2011, 1:24 AM
Sencha Touch version tested:

1.1.0


Platform tested against:

iOS 4.2.1 touch
iOS 4.3 iPad


Description:

Redraw is constantly offset to the left after changing device orientation on iPodTouch and iPad.


Test Case:
Your kitchensink sample of Sencha Touch 1.1.0

Steps to reproduce the problem:

change orientation to all possible orientations


The result that was expected:

Proper redraw in new orientation


The result that occurs instead:

redraw is rotated, but severely offset on white background without a chance to correct, move, slide


Screenshot or Video:

attached


Debugging already done:

none


Possible fix:

not provided

pixelpartner
29 May 2011, 1:26 AM
I wanted to grab some screenshots, but the problems did not occur online.
Did someone fix it ?

rdougan
3 Jun 2011, 3:16 PM
@pixelpartner

Are you saying this can no longer be reproduced?

pixelpartner
6 Jun 2011, 5:24 AM
I had the strange effect, that 3 bugs were not reproduceable the other day.
- proper redraw after orientation change
- Alert overlay did draw button over input field
- Same for prompt overlay

I tried it again with the 1.1.0 online kitchensink app and occasionally the rotate but not the redraw happen, so the rotated view stays badly offset forever.

merrilllex2
7 Dec 2011, 9:03 AM
My experience is that the panel gets shifted to the left when the orientation goes from landscape to portrait, but not consistently. Any help is appreciated.

squarefan
24 Jan 2012, 8:52 AM
I am experiencing the same problem in different applications. Is there a fix yet?

cheers,