I am new to ExtJs.
I have create sample ExtJs app and I am getting error 'Ext.app is undefined' in the console. I am not getting desired output on the screen.
Following is my app.js file and HTML file:
Ext.application({
name: 'HelloWorld',
launch: function () {
console.log('App created');
}
}
)
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript" src="Scripts/ext-debug.js"></script>
<script language="javascript" src="app/app.js" type="text/javascript"></script>
<link href="Styles/extjs.css" type="text/css" rel="stylesheet" />
</head>
<body>
</body>
</html>
Following is the image of project
The ext-debug.js script only includes the types under the root Ext namespace. Try including ext-all-debug.js instead.
<script language="javascript" type="text/javascript" src="Scripts/ext-all-debug.js"></script>
Try requiring Ext.app.Application as per for the following forum thread.
https://www.sencha.com/forum/showthread.php?304087-ext-debug-receiving-Ext-app-setupPaths-undefined-Full-source-debugging
Ext.require([
'Ext.app.Application'
], function() {
Ext.application({
...
});
});
you need to reference the framework's bootstrap.js (while in debug mode) in order the have Ext.Loader (aka the mini-loader) available; after compiling, it's source code + framework concatenated into a single file. loading the pre-built ext-all.js or ext-all-debug.js is not exactly how this framework works (despite it may solve your problem); better use SenchaCmd, else you'd be lost with dependencies easily. here would be one example (mine) for an ExtJS project; eg. see the Application.js and compare that to the live example's application.js, to see what I mean.
Related
I have a simple question. Basically I have index.html:
<!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>Title of document</title>
</head>
<body>
<script src="x.js"></script>
<script>
iny();
</script>
</body>
</html>
// x.js
console.log("x.js");
document.write("<script src='y.js'></script>");
// y.js
console.log("y.js");
function iny() {
console.log("iny");
}
As you can see, x.js loads a.js which, in turn, loads y.js. Here are the 2 scripts which live in 2 different files:
As you can see a.js syncronously loads y.js using document.write.
Now my question is: can document write get me into trouble in this case? My aim is to load y.js syncronously and that is the only reason why I am using the write. As far as I know there is no other way. Also it is not an option to have the code of y.js copy/pasted in to x.js. The 2 scripts must remain separate.
Thanks
I am trying to load data from an api using ajax and json however it keeps giving this error.
ReferenceError: Can't find variable: $
Global code
This is the html code used
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="test.js"></script>
</head>
<body>
<div id="div1">Old Content</div>
<button>Load</button>
</body>
</html>
Below is the jQuery Code
$(document).ready(function(){
$("button").click(function(){
var url = 'http://creative.coventry.ac.uk/~bookshop/v1.1/index.php/genre/list';
$.get(url, function(data,status){
console.log(data);
});
});
});
The "$" keyword is used by the jQuery library, which you haven't included in your HTML to be loaded alongside the rest of the document.
Add this before your existing script tag to load jQuery from Google's CDN:
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
Note that you might run into problems trying to retrieve cross domain json files. Consider looking up jsonp if that's the case.
Edit: fixed the URL
I've recently ran into a problem and I would really use a bit of help from the community. I'm trying to load a HTML file using jQuery load().
The index file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question</title>
<meta http-equiv="Content-Type" Content="text/html; charset=euc-kr" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function restart(){
$("#wrap").load('new-content.html').hide().fadeIn('slow');
}
</script>
</head>
<body>
<div id="wrap">
<div id="content">Text before restart: 남성</div>
</div>
<br />
Restart
</body>
</html>
The new HTML file includes some simple HTML content and a call to a .js file (used for some animations). The new content file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question</title>
<meta http-equiv="Content-Type" Content="text/html; charset=euc-kr" />
<script src="main.js" language="javascript" type="text/javascript" />
</head>
<body>
<div id="contentInner">Text after restart: 여성</div>
</body>
</html>
As you can see I've included the correct encoding charsets (for both files) and I've double checked and I can confirm that every file used for this part of the code it's encoded as "KOREAN" (checked in different apps like Dreamweaver, Notepad++, Sublime Text 2).
Yet still once I load the content the characters are not encoded properly; question marks appearing instead of characters.
Of course I made some searching before posting and I found a few helpful topics about this called the PHP header solution, but this isn't an options since it need to use HTML/JS/CSS only.
The same behavior occurs when I'm using the Japanese language too. In other latin based languages everything is working perfectly fine of course.
Any sort of input/advice/help would be much much appreciated.
Thank you!
I'm trying to render HTML using compiled templates with dust.js in a browser (not server-side with node.js). If I compile the template in the client-side javascript, it works fine. If I pre-compile the template and include it as a script tag as recommended, the dust.loadSource statement results in the Chrome debugger saying: "Uncaught ReferenceError: nowork is not defined", where "nowork" is the template name. So...
This HTML and script works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>This Works</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="dust-full-0.3.0.min.js"></script>
</head>
<body>
<div id="bingo"></div>
<script type="text/javascript">
var templateKey = 'works';
var myView = {"people":[{"name":"Fred"},{"name":"Harry"},{"name":"Linda"},{"name":"Mary"}]};
dust.loadSource(dust.compile("{#people}<br/>{name}{/people}", templateKey));
dust.render(templateKey, myView, function(err, out) {
$('#bingo').html(out);
});
</script>
</body>
</html>
But this doesn't:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>This Doesn't Work</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="dust-full-0.3.0.min.js"></script>
<script type='text/javascript' src="nowork.js"></script>
</head>
<body>
<div id="bingo"></div>
<script type="text/javascript">
var templateKey = 'nowork';
var myView = {"people":[{"name":"Fred"},{"name":"Harry"},{"name":"Linda"},{"name":"Mary"}]};
dust.loadSource(templateKey);
dust.render(templateKey, myView, function(err, out) {
$('#bingo').html(out);
});
</script>
</body>
</html>
Where the included nowork.js file contains:
(function() {
dust.register("nowork", body_0);
function body_0(chk, ctx) {
return chk.section(ctx.get("people"), ctx, {
"block": body_1
}, null);
}
function body_1(chk, ctx) {
return chk.write("<br/>").reference(ctx.get("name"), ctx, "h");
}
return body_0;
})();
Can anyone help?
I just realized, that this may be due to these files not being served on a machine with node.js installed. I'm actually working locally on my desktop machine. Is that it?
You actually don't need to call dust.loadSource when you are serving pre-compiled templates. Internally, dust.loadSource just does an eval on the string of JavaScript that is returned by dust.compile. If you remove the dust.loadSource line, your template should render properly.
Node.js isn't necessary for what you are attempting here. As a matter of fact, dust-full isn't necessary, either. You can use dust-core if all you are doing is rendering on the client.
I am trying to implement a fancybox. http://fancybox.net/howto
I want to call this function on an an element. Full JS file. http://fancybox.net/js/fancybox/jquery.fancybox-1.2.1.js
$.fn.fancybox = function(settings) {
I have done this:
$(document).ready(function() {
$("a#inline").fn.fancybox();
});
However, I keep getting this error (through firebug):
$("a#inline").fn is undefined
[Break on this error] $("a#inline").fn.fancybox();
What does this mean? I am basically having instantiating problems.
Please help.
EDIT
The HTML file:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Technologies</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="fancy/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="fancy/jquery.fancybox-1.2.1.js"></script>
<link rel="stylesheet" href="fancy/fancybox.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a#inline").fancybox();
});
</script>
</head>
<body>
<?php
include_once ("header.php");
?>
<div id="channel_calc">
How many Channels do I need?
<span id="yellow"><a id="inline" href="#ddm">Channel Calculator</a></span>
</div>
$('#inline').fancybox();
.fn refers to the prototype.
Di you find the error? Had the same problem. Solution was that i had included twice a javascript file, rather i included the jquery.js file twice.
I was also having this problem and found that I had included jquery.js twice. Removing the second reference fixed the error I was getting from the fancybox call
$("a#inline").fn.fancybox(); should be $("a#inline").fancybox();
You have to make sure to load fancybox AFTER jquery, otherwise you will get a "fancybox is not a function" error and your other javascript will break as well:
BROKEN:
<script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="/js/jquery-1.6.1.js"></script>
GOOD:
<script type="text/javascript" src="/js/jquery-1.6.1.js"></script>
<script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.4.js"></script>
I have copied a fragment of your HTML and JS inside jsfiddle.
When I downgraded to jquery 1.3.2, [see left sidebar under framework in JSFiddle example] your code won't work.
When I upgrade to 1.4.4 or later versions, it worked.
Solution
Try upgrading your jquery to 1.4.4 or later versions and test again.
Also I noticed you are including an external header.php, so make sure there are no other jquery scripts being included in this file or your js codes will break.
See this link for the working example of your own code using jquery version 1.4.4: http://jsfiddle.net/Ca6N5/
I think you forgot to also include jquery itself. Fancybox depends on jquery.
<script type="text/javascript" src="path-to-file/jquery.js"></script>
As Ben said, make sure jQuery is not being included twice by accident.
$("a#inline").fn.fancybox();
use newest jquery & fancybox
$("a#inline").fancybox(); -> this is correct
Here is examples: http://softm.org.ua/google-map-jquery-plugins/