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();
}
});
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();
}
});