Static page loading in browser very slow with EXT-JS 4.0.2

**rajesh_kar123** · 18 Mar 2012 10:52 PM

Hi,
I am using Ext Js-4.0.2 for my project and all my pages are static html pages.
I observe that, the html pages load very slowly, in the browser like, IE 7, IE 8 and Firefox 3.8.
I have not tested in other browsers.
I have kept all the folder structures as it is from the downloaded sorce library.
Only modified my required things.

As per EXT-Js 4 coding structure, inside the JS files, I call all the Ext.require() first and then the onReady() function.

I am not using any remote data load also for my grid or form.

Please let me know, how can I improve the speed?

Regards,
Rajesh

**mankz** · 19 Mar 2012 4:10 AM

Did you do and digging and debugging/profiling to show what's taking so long? You'll need to post some code to get feedback...

**rajesh_kar123** · 19 Mar 2012 9:03 PM

Sir,
Her is my problem below:
1) as per the attached image, I am using indivisual external js files for my html page.
2) for viewport i am using one js file with north, west and center region
3)one for north, one for west and one more js for center region as per the image attached.
4) When I render the html, it takes more time in IE7 or 8, but it runs faster in Firefox.
5) I do not understand how to solve this?

The work_space.html file
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Harmony</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
</head>
<body>


<div id="north">
<div class="header"><div class="logo"><img src="../../resources/themes/images/logo.gif" alt="Harmony"/></div><div class="log-detail" id="toolbar1">
</div>
</div>
</div>



<div id="west">

</div>


<div id="center1">
<div id="work"></div><div id="work1" style="margin-top:5px;"></div>
</div>



<script type="text/javascript" src="../../bootstrap.js"></script>
<script type="text/javascript" src="form_work_space.js"></script>
<script type="text/javascript" src="tree_loader.js"></script>
<script type="text/javascript" src="layout_work_space.js"></script>
<script type="text/javascript" src="toolbar_super.js"></script>

</body>
</html>
</code>
--------------------------------------------------------------------------------------------------
layout_work_space.js

<code>
// JavaScript Document

Ext.require(['*']);

Ext.onReady(function() {

Ext.QuickTips.init();

// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

var viewport = Ext.create('Ext.Viewport', {
id: 'border-example',
layout: 'border',
items: [
// create instance immediately
Ext.create('Ext.Component', {
region: 'north',
height: 43, // give north and south regions a height
el: 'north',
style: {
background:'#4a5678'
}
}),{
region: 'west',
stateId: 'navigation-panel',
id: 'west-panel', // see Ext.getCmp() below
title: 'Main Menu',
split: true,
width: 200,
minWidth: 175,
maxWidth: 400,
collapsible: true,
//animCollapse: true,
margins: '0 0 0 5',
//layout: 'accordion',
items: [{
contentEl: 'west',
//title: 'Navigation',
autoHeight:true,
border:false,
iconCls: 'nav' // see the HEAD section for style used
}/*, {
title: 'Settings',
html: '<p>Some settings in here.</p>',
iconCls: 'settings'
}, {
title: 'Information',
html: '<p>Some info in here.</p>',
iconCls: 'info'
}*/]
},
// in this instance the TabPanel is not wrapped by another panel
// since no title is needed, this Panel is added directly
// as a Container
Ext.create('Ext.panel.Panel', {
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
autoScroll:true,
// activeTab: 0, // first tab initially active
items: [{
contentEl: 'center1',
title: 'Workspace Management',
bodyStyle: 'padding: 5px 5px 5px 5px; overflow-x:hidden',
autoScroll: true,
border: false
}]
})]
});

});
</code>
-------------------------------------------------------------------------------------------------------
form_work_space.js

<code>
Ext.onReady( function() {
Ext.QuickTips.init();
var bd = Ext.getBody();
/* XXXXXXXXXXXXX WI details XXXXXXXXXXX */
var a1 = Ext.create('Ext.form.TextField',{
fieldLabel : 'Workspace Name',
name: 'a1',
anchor:'50%'
});
var a2 = Ext.create('Ext.form.TextArea',{
fieldLabel : 'Description',
name: 'a2',
anchor:'70%',
height:70
});
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
// sample static data for the store
var myData = [
['PTP','P1','Procure to pay process','10'],
['RTR','R2','Reporting process','5']
];
var myData1 = [
['PTP','P1','Procure to pay process','10'],
['RTR','R2','Reporting process','5'],
['OTC','R2','Reporting process','8']
];
var myData2 = [
['OTC','P1','Description Changed','10'],
['RTR','R2','Reporting process','5'],
['OTC','R2','Reporting process','8']
];
// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'c1'},
{name: 'c2'},
{name: 'c3'},
{name: 'c4'}
],
data: myData
});

// create the Grid
var sm = Ext.create('Ext.selection.CheckboxModel');
var grid = Ext.create('Ext.grid.Panel', {
renderTo:'work1',
store: store,
selModel: sm,
/* stateful: true,
stateId: 'stateGrid',*/
columns: [
{text: 'Workspace',width:100,sortable:true,dataIndex:'c1'},
{text: 'ID',width:100,sortable:true,dataIndex:'c2'},
{text: 'Description',width:300,sortable:true,dataIndex:'c3'},
{text: 'No of Processes',flex:1,sortable:true,dataIndex:'c4'}

],
height: 300,
width: 780,
frame:true,
iconCls: 'icon-grid',
title: 'List of Existing Workspaces',
viewConfig: {
stripeRows: true
},

buttons: [{
text: 'Modify',
handler: function() {
fn: f1();
}
},{
text: 'Remove',
handler: function() {
var sm = grid.getSelectionModel();
var sel = sm.getSelection();
if (store.getCount() > 0) {
Ext.Msg.show({
title: 'Confirm',
buttons: Ext.MessageBox.YESNO,
msg: 'Want to remove the current record?',
fn: function(btn){
if (btn == 'yes'){
grid.getStore().remove(sel);
}
}
});
}
}
}],
buttonAlign:'left'
});
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
var form1 = Ext.create('Ext.form.Panel', {
renderTo:'work',
labelWidth: 120,
frame:true,
title: 'Add New Workspace',
bodyStyle:'padding:5px 5px 0',
layout: 'column',
width: 780,
defaults: {
anchor: '100%'
},
defaultType: 'textfield',
fieldDefaults: {
msgTarget: 'side'
},
items: [{
xtype:'fieldset',
//title: 'Add New Workspace',
columnWidth: 0.9,
//collapsible: true,
defaultType: 'textfield',
defaults: {anchor: '100%'},
layout: 'anchor',
style: {
borderWidth:'0px',
marginBottom:'0px'
},
items :[a1,a2]
}],

buttons: [{
text: 'Add',
handler: function() {
store.loadData(myData1);
}
}],
buttonAlign:'left'
});
// XXXX code for pop-up window XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
function f1() {
var a1 = Ext.create('Ext.form.TextField',{
fieldLabel : 'Workspace Name',
name: 'a1',
anchor:'60%',
value:'PTP'
});
var a2 = Ext.create('Ext.form.TextArea',{
fieldLabel : 'Description',
name: 'a2',
anchor:'100%',
value:'Procure to pay process'
});
var top = Ext.create('Ext.form.Panel', {
frame:true,
bodyStyle:'padding:5px 5px 0',
width: 600,
fieldDefaults: {
labelAlign: 'left',
msgTarget: 'side'
},
items: [{
xtype: 'container',
anchor: '100%',
layout:'column',
items:[{
xtype: 'container',
columnWidth:.9,
layout: 'anchor',
items: [a1]
},{
xtype: 'container',
columnWidth:.9,
layout: 'anchor',
items: [a2]
}]
}],

buttons: [{
text: 'Save',
handler: function() {
Ext.MessageBox.alert('Status','Data saved successfully.');
store.loadData(myData2);
win1.close();
}
},{
text: 'Cancel',
handler: function() {
win1.close();
}
}],
buttonAlign:'center'
});

// XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
var win1 = Ext.create('widget.window', {
title: 'Modify Workspace',
width: 500,
height: 180,
plain: true,
modal:true,
headerPosition: 'top',
layout: 'fit',
items:[top]
});
win1.show();
}
});
/* XXXXXXXXXXXX End of main function XXXXXXXXXXX */
</code>

Please help me if my way of doing this coding is wrong?

**evant** · 19 Mar 2012 10:56 PM

Dynamic loading is slow, don't use it for production.

**rajesh_kar123** · 20 Mar 2012 12:25 AM

Hi,
Kindly, explain it more, What exactly, you are talking about and any specific method of integrating these js files?

Please let me know the solution to improve.

Thanks & Regards,
Rajesh

Static page loading in browser very slow with EXT-JS 4.0.2

Thread Tools

Search Thread

Display

Static page loading in browser very slow with EXT-JS 4.0.2

Static page loading in browser very slow with EXT-JS 4.0.2