New to ExtJs. I have looked at a bunch of threads, but everything I try is not working. I am using ExtJS 4 and I keep getting and undefined Ext error for the following code:
<html>
<head>
<script type="text/javascript" src="/extjs/ext-all.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
//app.js
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});
Check the path of ext-all.js. Make sure the first slash is correct?
Your browser failed to load:
<script type="text/javascript" src="/extjs/ext-all.js"></script>
Which is next to certain to be a path issue. Thus the following line:
Ext.application({
Will raise the error you see (as there's no object Ext in scope).
Note that the path to the extjs library is relative to your index.html path
So if extjs is a subfolder of the folder where index.html exists. You should really include it using:
<script type="text/javascript" src="extjs/ext-all.js"></script>
If your ext-all.js path is correct than try
<script type="text/javascript" src="../extjs/ext-all.js"></script>
if problem occure only in IE then just press ctrl+F5 for upload latest javascript in IE
Related
<!DOCTYPE html>
<html>
<head>
<!-- locally referred ExtJS library files -->
<link href="ExtjsLib/ext-all.css" rel="stylesheet"
<script type="text/javascript" src="ExtjsLib/ext-all.js"></script>
<script type="text/javascript" src="ExtjsLib/ext-base.js"></script>
<script type="text/javascript"> Ext.BLANK_IMAGE_URL = "ExtjsLib/s.gif"; </script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.Panel', {
renderTo: 'helloWorldPanel',
height: 200,
width: 600,
title: 'Hello world',
html: 'First Ext JS Hello World Program'
});
});
</script>
</head>
<body>
<div id="helloWorldPanel" />
</body>
</html>
What's wrong in my code.I am using ExtJS 3.4.1 version and I have referred the Extjs library files locally from 'ExtLib' folder. Its displaying just the blank page as output. please help.
This line:
<!-- locally referred ExtJS library files
should be this
<!-- locally referred ExtJS library files -->
If you don't close the comment everything is a comment.
Use Library Ext.all.debug.js instead of ext.base.js.
I am trying to use Google maps in Angularjs app as described here: http://angular-ui.github.io/angular-google-maps/#!/use
I followed all the steps but I am getting following error:
My index.html has scripts in following order:
<!-- ionic/angularjs js -->
<script src='lib/loadash/dist/lodash.js'></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-messages/angular-messages.js"></script>
<script src="lib/angular-route/angular-route.js"></script>
<script src="lib/angular-cookies/angular-cookies.js"></script>
<script src="lib/angular-sanitize/angular-sanitize.js"></script>
<script src="lib/angular-animate/angular-animate.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src='lib/angular-simple-logger/dist/angular-simple-logger.min.js'></script>
<script src='lib/angular-google-maps/dist/angular-google-maps.min.js'></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
In my app.js I have configured it as follows:
swarmsApp.config(function($stateProvider, $urlRouterProvider, $httpProvider, uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
// key: 'your api key',
v: '3.20', //defaults to latest 3.X anyhow
libraries: 'weather,geometry,visualization'
});
And in my controller:
.controller('FarmersCtrl', ['$scope','$http', 'uiGmapGoogleMapApi', function($scope, $http, uiGmapGoogleMapApi) {
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
What is going wrong?
UPDATE : this error was solved by including <script src='//maps.googleapis.com/maps/api/js?sensor=false'></script> before <script src='lib/angular-google-maps/dist/angular-google-maps.js'></script> However it looks like not recommended way.
This led to another error:
There is a missing library. I think you need lodash for angular google map. See the code snippet in your given library link:
<script src='/path/to/lodash[.min].js'></script>
<script src='/path/to/angular[.min].js'></script>
<script src='/path/to/angular-simple-logger/angular-simple-logger[.min].js'></script>
<script src='/path/to/angular-google-maps[.min].js'></script>
Include the library and try again. Thanks.
I referred this post:
http://codepen.io/netsi1964/post/angularjs-google-maps-directive and replaced downloaded loadash in lib folder with
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
I am building an SPA to run on a page in SharePoint 2013 online and having problems installing ui-bootstrap manually.
I have downloaded this file https://github.com/angular-ui/bootstrap/blob/master/src/modal/modal.js and saved as ui-bootstrap.js.
Then I reference the file in index.html:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="~site/Webparts/js/angular.min.js"></script>
<script type="text/javascript" src="~site/Webparts/js/angular-route.min.js"></script>
<script type="text/javascript" src="~site/Webparts/js/ui-bootstrap.js"></script>
<script type="text/javascript" src="~site/Webparts/testLabApp/testLabApp.js"></script>
<script type="text/javascript" src="~site/Webparts/testLabApp/dal.js"></script>
<script type="text/javascript" src="~site/Webparts/testLabApp/email.js"></script>
<link href="~site/Webparts/testLabApp/style.css" rel="stylesheet" />
Then added dependency in App js file:
var testLabApp = angular.module('testLabApp', ["ngRoute", "ui.bootstrap"]);
However, I am getting injector error:
[$injector:modulerr] http://errors.angularjs.org/1.4.2/$injector/modulerr?p0=testLabApp&p1=Error%3A%20%5B%24injector%3Amodulerr...
Clearly, I have done something wrong, but I could not find how to download the right file(s) from github.
Any help is most appreciated.
Regards
Craig
If you are just using the modal.js, there is no module named ui.bootstrap.
Try changing:
var testLabApp = angular.module('testLabApp', ["ngRoute", "ui.bootstrap"]);
To:
var testLabApp = angular.module('testLabApp', ["ngRoute", "ui.bootstrap.modal"]);
Make sure to also download the template files for the modal (window.html and backdrop.html)
It looks like the problem is that you only downloaded modal.js, which is only the modal section, not all of ui-bootstrap.
Try this file: https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.js
Or minified: https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js
I am quit new in AngularJS and am trying to display a simple "hello world". Instead it displays: {{"hello" + " world"}}.
app.js:
var app = angular.module('store', []);
defaultLayout.ftl.html
<html ng-app="store">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<link href="bootstrap.min.css" rel="stylesheet"/>
</head>
<p>{{"hello" + " you"}}</p>
</body>
</html>
Folder structure
assets/css
bootstrap.min.css
views/layout
defaultLayout.ftl.html
app.js
In addition I don´t have any style in the web page. Does someone know where are my problems??
For what I understand, you have to include the folder name in the src and href path:
<script type="text/javascript" src="views/layout/app.js"></script>
<link href="assets/css/bootstrap.min.css" rel="stylesheet"/>
Finally I manage to solve the problem. I don´t know why but it works if I move app.js to assets folder and write this:
<script type="text/javascript" src="assets/app.js"></script>:
Thanks for your answers!
Please use google CDN:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
You don't go inside your assets directory to fetch bootstrap
I am learning Extjs and wrote a demo with Extjs4.2,but it didn't work
<html>
<head>
<title>A Simple JavaScript Function Example</title>
<style type="text/css" href="css/ext-all.css"></style>
<script type="text/javascript" src="js/ext.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.application({
name: 'HelloExt',
launch: function(){
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});
</script>
</body>
</html>
in chrome,it shows
and corresponding place of "ext.js:18" is
Try replacing this line:
<script type="text/javascript" src="js/ext.js"></script>
To this:
<script type="text/javascript" src="js/ext-all.js"></script>
Another thing, try writing your application in a separate file. Inline scripts are a no-go.