[RESOLVED] Extjs 4 loads almost 2.4 MB of data

[nikhilkrishnan]

Hi

I have created a login panel using Extjs 4 and its takes almost 1.5 minutes to download all the files.

When i checked in the firebug it shows that almost all the files are downloaded. How can i rectify this.. Here is the code I'm using

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="resources/desktop.css" />  
        <style type="text/css">
        html, body {
          height: 100%;
          margin: 0;
          padding: 0;
        }
        </style>               
        <script type="text/javascript" src="extjs/ext.js"></script>
        <script type="text/javascript">
            Ext.require('Ext.form.Panel');
            Ext.require('Ext.Window');
            Ext.onReady(function () {
                var frmlogin = Ext.create('Ext.form.Panel',{ 
                    labelWidth:100,
                    id:'frmlogin',
                    frame:true, 
                    defaultType:'textfield',
                    bodyStyle:'padding:12px',
                    items:[{ 
                            fieldLabel:'Username',
                            name:'user_name',
                            id:'user_name'
                        },{
                            fieldLabel:'Password',
                            name:'user_pass',
                            inputType:'password'
                        }],
        
                    buttons:[{ 
                            text:'Login',
                            id:'Login',
                            listeners: {
                                click: loginHandler
                            }

                        },{
                            text:'Exit',
                            handler:function(){
                                window.close();
                            }
                        }]
                });
                function loginHandler(){    
                     var redirect = 'desktop.php';     
                            win.hide();
                            window.location = redirect;
                 
                }
                var win = create ('Ext.Window',{
                    layout:'fit',
                    width:325,
                    height:150,
                    title:'title will come here', 
                    closable: false,
                    resizable: false,
                    plain: true,
                    border: true,
                    items: [frmlogin]
                });
                win.show();          
            });
        </script>

[edspencer]

Are you trying to use dynamic loading in production? We strongly advise against that... instead you should use either ext-all.js (minified build) or look at section 3 of http://docs.sencha.com/ext-js/4-0/#!...etting_started for how to create a custom build tuned for your application

[nikhilkrishnan]

Thank you ed .. I have tried sencha SDK in ubuntu . but its showing 'sencha : Command not found'.

[edspencer]

You installed the SDK Tools (http://www.sencha.com/products/sdk-tools/)?

[nikhilkrishnan]

Yes. Its working now. I had to restart my system..

[edspencer]

Great

[in2rd]

Ed:

Do components also benefit from the Loader as they are created? For example, if I create two xtypes (panel and a grid), and have require statements in their parent, as well as each component, are those loaded at creation?

I seem to remember this being the case, but not 100% sure. If so, depending on your requirements, that also seems fairly efficient.

Just a thought.

[edspencer]

Not sure I fully understand the question, but in development mode it will synchronously load those dependencies at instantiation time if those classes are not already on the page. In production we turn that off by default because there it should be running on a production build