PDA

View Full Version : Ext.Loader



bugify3141632
23 Dec 2012, 12:52 PM
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

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

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

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

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 =)

skirtle
24 Dec 2012, 2:55 PM
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.

bugify3141632
2 Jan 2013, 6:10 PM
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 ;)

skirtle
2 Jan 2013, 7:39 PM
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.


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/#!/guide/application_architecture

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

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