<!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.
Related
I am trying to learn how to use AngularJS and AngularJS Material using following codes:
<!doctype html>
<html lang="en">
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script>
angular.module('F1FeederApp', [ 'ngMaterial' ]).controller('driversController',
function($scope) {
}).config(
function($mdThemingProvider) {
$mdThemingProvider.theme('default').primaryPalette('pink')
.accentPalette('orange');
});
;
</script>
<!-- default themes and core styles -->
<link rel="stylesheet"
href="bower_components/angular-material/angular-material.css">
</head>
<body ng-app="F1FeederApp">
<md-content>
<md-toolbar class="md-tall md-accent">
<h2 class="md-toolbar-tools">
<span>Toolbar: tall (md-accent)</span>
</h2>
</md-toolbar>
<ng-view></ng-view>
</md-content>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
However, the Material is not displayed. What could be wrong with my code?
Console in Browser doesn't give me any error.
Just tried your code and it works fine on Chrome, FireFox, and Safari.
By the way, you have an extra ; before your closing script tag
<script>
angular.module('F1FeederApp', [ 'ngMaterial' ]).controller('driversController',
function($scope) {
}).config(
function($mdThemingProvider) {
$mdThemingProvider.theme('default').primaryPalette('pink')
.accentPalette('orange');
});
;
</script>
I recommend you to check your angular and angular material versions,
or check if there is a problem in your .js files.
Im sorry for posting so much about angular tonight but im running into a lot of trouble creating my practice app and it is important I have it running and test created by tomorrow.
I had everything working a few hours ago but now only {{title}} appears on the page and I get the error TypeError: Cannot read property 'labels' of undefined. I am hoping it is just something small that I am missing but I cannot see it at all one thing I might mention is I renamed my service dataSrv from dataRepository other then that I have mostly just been writing tests (or trying too) but I dont think that has anything to do with it.
If anyone can help im getting panicky.
Thanks!
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="ChartApp">
<head>
<title>Chart.js Trial</title>
<script type="text/javascript" src="/Scripts/angular/angular.js"></script>
<script type="text/javascript" src="/Scripts/chartjs/Chart.js"></script>
<script type="text/javascript" src="/Scripts/angular-chart.js-master/dist/angular-chart.js"></script>
<script type="text/javascript" src="/Scripts/controller/main-controller.js"></script>
<script type="text/javascript" src="/Scripts/service/data-service.js"></script>
<script type="text/javascript" src="/Scripts/directive/color-directive.js"></script>
<link href="/Scripts/angular-chart.js-master/examples/bootstrap.css" rel="stylesheet" />
<link href="/Scripts/angular-chart.js-master/dist/angular-chart.css" rel="stylesheet" />
<link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
<div ng-controller="MainCtrl">
<h1 add-color-header>{{title}}</h1>
<canvas id="base" class="chart-base" chart-type="type" data="data" labels="labels" legend="true"></canvas>
</div>
</body>
</html>
data-srv.js
angular.module("ChartApp")
.factory("dataSrv", function () {
return {
labels: ["Reading", "Coding", "Thinking About Coding", "Reddit", "StackOverflow"],
data: [500, 300, 300, 40, 220],
type: "PolarArea",
title: "Angular Chart Expriment"
};
});
main-controller.js
var app = angular.module("ChartApp", ["chart.js"]);
app.controller("MainCtrl", ["$scope",
function ($scope, dataSrv) {
$scope.labels = dataSrv.labels;
$scope.data = dataSrv.data;
$scope.type = dataSrv.type;
$scope.title = dataSrv.title;
}
]);
well I am trying to apply the PgroutingWorkshop using PHP, ExtJS, GeoExt and OpenLayers.
I fact in the tutorial, they are using ExtJS 3.3.1 I think and me the 4.2.1
First of all, they mentionned a JS script called ext-base that doesn't exist on the 4.2.1 version. I said, this can not be very important, so I applied every thing they said but nothing appears.
I tried another tutorial from the official website of geoExt without osm map and it doen't work neither.
here is the code :
<html>
<head>
<title>Une page GeoExt de base</title>
<script src="ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ext/ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"></link>
<script src="OpenLayers/OpenLayers.js" type="text/javascript"></script>
<script src="GeoExt/lib/GeoExt.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="GeoExt/resources/css/geoext-all-debug.css"></link>
<script type="text/javascript">
Ext.onReady(function() {
var map = new OpenLayers.Map();
var layer = new OpenLayers.Layer.WMS(
"Global Imagery",
"http://maps.opengeo.org/geowebcache/service/wms",
{layers: "bluemarble"}
);
map.addLayer(layer);
new GeoExt.MapPanel({
renderTo: 'usthb',
height: 400,
width: 600,
map: map,
title: 'A Simple GeoExt Map'
});
});
</script>
</head>
<body>
<div id="usthb" style="width:100% height=200% "></div>
<div id="navigator"></div>
</body>
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
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.