1. #1
    Sencha User
    Join Date
    Jan 2009
    Posts
    74
    Vote Rating
    0
    rajesh_kar123 is on a distinguished road

      0  

    Arrow 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


    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

  2. #2
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,761
    Vote Rating
    108
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default


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

  3. #3
    Sencha User
    Join Date
    Jan 2009
    Posts
    74
    Vote Rating
    0
    rajesh_kar123 is on a distinguished road

      0  

    Default


    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>
    <!-- The defalt css for extjs goes here -->
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    </head>
    <body>

    <!-- The north Panel starts here -->
    <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>

    <!-- The west panel starts here -->
    <!-- use class="x-hide-display" to prevent a brief flicker of the content -->
    <div id="west">

    </div>

    <!-- The center panel starts here -->
    <div id="center1">
    <div id="work"></div><div id="work1" style="margin-top:5px;"></div>
    </div>

    <!-- Place all the javascript files at the bottom -->

    <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?
    Attached Images

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,018
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Dynamic loading is slow, don't use it for production.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha User
    Join Date
    Jan 2009
    Posts
    74
    Vote Rating
    0
    rajesh_kar123 is on a distinguished road

      0  

    Default


    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

Thread Participants: 2