PDA

View Full Version : Browser crash on doComponentLayout



YuriSts
28 Apr 2011, 9:45 AM
Hello! Our environment is ipad. We want to create application without following kitchensink pattern, we want left panel component and content panel as a separate panels. It means we invoke doComponentLayout on orientation change because we change component dynamically. For instance we remove left panel and add it as a showBy Button. But when we have too many items in our content panel (top list 50 items and bottom panel with html content) we get browser crash down. Our doComponentLayout costs much. It takes about 15 seconds.

Thx in advanced!

jay@moduscreate.com
28 Apr 2011, 10:54 AM
How are they to know what the problem is with a description? Can you post a reproducible code snippet?

YuriSts
29 Apr 2011, 3:42 AM
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();



}

});