PDA

View Full Version : Help with example in "Ext JS in Action, Second Edition"



newtoextjs4
20 Sep 2012, 9:19 AM
As I am new to Ext JS, I decided to read the MEAP Edition of "Ext JS in Action, Second Edition" while trying at the same time to implement the examples found within the book.

At this point my knowledge of Ext JS is very rudimentary. As a result of my lack of knowledge, I am stuck on the following example that I found within the book. It is related to using Ajax with Ext.Element.

The book says:
The Ext.Element class has the ability to perform an Ajax call to retrieve remote HTML
fragments and inject those fragments into its innerHTML. To exercise this, you’ll need to
first write an HTML snippet to load:
<div>
Hello there! This is an HTML fragment.
<script type="text/javascript">
Ext.getBody().highlight();
</script>
</div>
In this HTML fragment, you have a simple div with an embedded script tag, which
performs an Ext.getBody call and uses chaining to execute the results of that call to
execute its highlight method. Ext.getBody is a convenience method to get a reference
to the document.body wrapped by Ext.Element. Save this file as htmlFragment.html.

Next, you’ll perform the load of this snippet:
Ext.getBody().load({
url : 'htmlFragment.html',
scripts : true
});


My question is: how do I load the snippet above? I have tried to place the snippet with the call to Ext.onReady but that did not work.

scottmartin
20 Sep 2012, 9:40 AM
Have you included the ExtJS library in your html file? Do you see any errors in the console?

Scott.

newtoextjs4
20 Sep 2012, 10:08 AM
Yes, I did include the ExtJS library in my html file.

Here is content of my index.html file:

<html>
<head>
<title>ExtJS in Action</title>

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

<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">
Ext.onReady(function() {
Ext.getBody().load({
url : 'htmlFragment.html',
scripts : true
});
});
</script>

</head>
<body>
</body>
</html>


I just noticed that I do get an error in the console. It says: "TypeError: Ext.ElementLoader is not a constructor" followed by "target: me"

scottmartin
20 Sep 2012, 10:41 AM
This loaded ok on this end:

Please update the path to Ext on your local server

index.html


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>f243304</title>

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

<script type="text/javascript" src="../../extjs4/ext-all-debug.js"></script>

<!-- page specific -->
<script type="text/javascript" src="example.js"></script>
</head>
<body>
<h1>f243304</h1>
<div id="sencha-div" style="padding:30px;"></div>
</body>
</html>



example.js


Ext.onReady(function(){
Ext.getBody().load({
url : 'element.html',
scripts : true
});
});


element.html


<html>
<head>
<title>Title</title>
</head>
<body>
<h1>This is the Body</h1>
</body>
</html>


You should see this when you run, no console errors :

This is the Body

Scott.

newtoextjs4
20 Sep 2012, 11:06 AM
Thanks. That did it.

It is strange that the same path that failed in this case worked for other examples.

scottmartin
20 Sep 2012, 11:55 AM
Do not be content until you know why ;)

Scott.

newtoextjs4
27 Sep 2012, 11:32 AM
It took me awhile but I think that I figured out why my example was not working when I was using 'ext-debug.js' rather than 'ext-all-debug.js'.

'ext-debug.js' only contains a minimal set of the Ext JS 4 Core library classes. Whereas 'ext-all-debug.js' contains all of them.

As a result, in order for my example to work with 'ext-debug.js,' I have to make sure that the proper classes are loaded. In my case the 'Container' class with a call to:

Ext.Loader.require('Ext.container.Container');