1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    2
    Vote Rating
    0
    bugify3141632 is on a distinguished road

      0  

    Default Unanswered: Ext.Loader

    Unanswered: Ext.Loader


    Hi guys, I wonder if you could give me a hint about a problem that I have. I'm working with the Ext.Loader to dinamically call / load components when I receive an user action.

    I have managed to get it to work in a test context but I cannot make it to work in my real application.

    First let me show you, my dummy application (the one that works)

    test.php
    Code:
    <!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
    <head>
        <title>Ext 4 Loader</title>
        <link rel="stylesheet" type="text/css"  href="../../extjs/resources/css/ext-all.css" />
        <script type="text/javascript" src="../../extjs/ext-debug.js"></script>
        <script type="text/javascript" src="component.js"></script>
    </head>
    <body>
    </body>
    </html>
    component.js
    Code:
    Ext.require([    'Ext.form.*'
    ]);
    
    
    Ext.onReady(function() {
    
    
        var win;
    
    
        function showContactForm() {
            if (!win) {
                
                Ext.Loader.setPath('AM', 'app');
                Ext.require('AM.okupa');
                
    
    
                win = Ext.widget('window', {
                    title: 'Contact Us',
                    closeAction: 'hide',
                    width: 400,
                    height: 400,
                    minHeight: 400,
                    layout: 'fit',
                    resizable: true,
                    modal: true,
                });
            }
            win.show();
        }
    
    
        var mainPanel = Ext.widget('panel', {
            renderTo: Ext.getBody(),
            title: 'Welcome!',
            width: 500,
            bodyPadding: 20,
    
    
            items: [{
                xtype: 'component',
                html: 'Thank you for visiting our site! We welcome your feedback; please click the button below to ' +
                      'send us a message. We will respond to your inquiry as quickly as possible.',
                style: 'margin-bottom: 20px;'
            }, {
                xtype: 'container',
                style: 'text-align:center',
                items: [{
                    xtype: 'button',
                    cls: 'contactBtn',
                    scale: 'large',
                    text: 'Contact Us',
                    handler: showContactForm
                }]
            }]
        });
    
    
    });
    app/okupa.js
    Code:
    Ext.application({    name: 'AM.okupa',
        appFolder: 'app',
    
    
        launch: function() {
            Ext.create('Ext.window.Window', {
        title: 'Hello',
        height: 200,
        width: 400,
        layout: 'fit',
        items: {  // Let's put an empty grid in just to illustrate fit layout
            xtype: 'grid',
            border: false,
            columns: [{header: 'World'}],
            store: Ext.create('Ext.data.ArrayStore', {})
        }
    }).show();
        }
    });
    Now, when I try to implement this in my real application, nothing happens (not even a warning on the debug console)

    Real Application
    Code:
    Ext.onReady(function() {        function info (msg){                
                if (panel_name == "item1") {   
                     // We can reach this, 100% sure        
                    Ext.Loader.setPath('AM', 'app');
                    Ext.require('AM.okupa');                    
                }    
            }
        
            var main_window = Ext.create('Ext.window.Window', {
                title : 'xxxxxxxxxx',
                id : 'win',
                             <snip>                                            
                listeners: {
                    'render': {
                        fn: function() {
                            this.body.on('click', this.handleClick, this);
                        }                                
                    }
                },
                handleClick: function(e, t){            
                    info(t.src);
                }        
            })
            
            main_window.doLayout();
            main_window.show();
    });
    Any recommendations / hints / help will be much appreciate =)

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,616
    Vote Rating
    327
    Answers
    545
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    I don't know precisely what the problem is but I can offer some suggestions.

    Firstly, make sure your cache is clear and that you're not fighting with an outdated copy of your code. View the source files from within the browser to confirm they are the correct versions.

    Next, if you haven't already, try other browsers to see what happens.

    Then try checking the network traffic to confirm that all the files are being loaded when you expect them to be.

    The loader is a dev tool, intended to make it easier to load individual JS files for debugging purposes. It is not really appropriate to use it for loading code on demand the way you have here. You should move all of the Ext.require calls to the start of component.js.

    Your use of an application is also odd, that should really be loaded up front too. Using Ext.require to pull in okupa.js is possibly the cause of your problem as Ext.require is intended for pulling in classes, not files.

  3. #3
    Sencha User
    Join Date
    Dec 2012
    Posts
    2
    Vote Rating
    0
    bugify3141632 is on a distinguished road

      0  

    Default


    Hi Skirtle, first of all sorry for my late response.
    I could make it to work, the only thing that was missing was the Ext.ns("classname"); on the file that I want it to load (i saw a couple of post asking questions about the loader not working, well that is the solution folks)

    From the other side, I have a really weird behaviour that I cannot really explain, If I use the above code in a separate environment, I can call okupa.js several times BUT if I call it from my application, I can only call it once (that is weird) (cache problems are discarted)

    What do you think skirtle? and thanks again for your response

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,616
    Vote Rating
    327
    Answers
    545
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Quote Originally Posted by bugify3141632 View Post
    I could make it to work, the only thing that was missing was the Ext.ns("classname"); on the file that I want it to load (i saw a couple of post asking questions about the loader not working, well that is the solution folks)
    I think you're 4-whys short of solving this properly:

    http://en.wikipedia.org/wiki/Five_whys

    Trying to extract what I can from the information you've provided, I still think the real problem is that you're badly abusing the Loader. As I've already said, it is for loading classes, not files. My guess would be that the Ext.ns is tricking the Loader into believing that it has successfully loaded the class it was trying to load but that's just glossing over the real problem, which is that you're not actually trying to load a class at all.

    I also suggest switching to ext-dev.js rather than ext-debug.js, you'll get better error logging.

    Quote Originally Posted by bugify3141632 View Post
    From the other side, I have a really weird behaviour that I cannot really explain, If I use the above code in a separate environment, I can call okupa.js several times BUT if I call it from my application, I can only call it once (that is weird) (cache problems are discarted)
    There's a massive disconnect here. The concept of 'calling' okupa.js doesn't make sense. You can call a method but not a file. All files should be loaded ahead of time and before you start trying to initiate your application.

    You badly need to unpick this mess before you try to go any further. Your file loading is all over the place and the apparent use of global variables is also worrying. It's difficult to know what it is you're trying to achieve but you seem to be massively overcomplicating things.

    The Loader is just a convenient way to include script tags automatically, it really shouldn't be used for much more than that.

    I suggest reading some of the introductory guides to the relevant concepts:

    http://docs.sencha.com/ext-js/4-1/#!/guide/class_system
    http://docs.sencha.com/ext-js/4-1/#!...n_architecture

    The code for the MVC examples (Feed Viewer & Nested Loading) are also worth some study:

    http://www.sencha.com/products/extjs/examples/

Thread Participants: 1