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.
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.
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;
}
]);
I want to write a simple sample in extjs5 and use Draw Package.
according to sencha doc my code is:
1.index.html
<head>
<script type="text/javascript">
var contextPath = '<%=context%>';
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<%--extJS--%>
<link rel="stylesheet" type="text/css" href="<%= context%>/js/ext5/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"/>
<script type="text/javascript" src="<%= context%>/js/ext5/build/ext-all.js"></script>
<script type="text/javascript" src="<%=context%>/js/extjspages/app.js"></script>
2.app.js
Ext.require("Ext.draw.Container");
Ext.application({
name: 'MyApp',
launch: function () {
Ext.create('Ext.draw.Container', {
sprites: [{
type: 'circle',
fillStyle: 'red',
r: 100,
cx: 100,
cy: 100
}],
height:205,
width:205,
renderTo:Ext.getBody()
});
}
});
but I catch an
GET .../Ext/draw/Container.js?_dc=1403991476236 404 (Not Found) error
what is my wrong?
thank you
I don't know how to use sencha cmd. But you can add "sencha-charts" in index.html code using:
<script type="text/javascript" src="<%= context%>/js/ext5/build/packages/sencha-charts/build/sencha-charts-debug.js"></script>
I'm trying some backbone.js examples and can't get change triggers to work. The "Welcome to this world" alert shows up as expected, but "Changed my name to" is never shown. Debugging the code with firefox reveils the same result, a breakpoint on the second alert is never hit.
Any ideas what's wrong?
This is my code:
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello-backbonejs</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script src="model.js" type="text/javascript"></script>
</body>
</html>
model.js
Person = Backbone.Model.extend({
defaults: {
name: 'Fetus',
age: 0
},
initialize: function(){
alert("Welcome to this world");
this.on("change:name", function(model){
var name = model.get("name"); // 'Stewie Griffin'
alert("Changed my name to " + name );
});
}
});
var person = new Person({ name: "Thomas", age: 67});
person.set({name: 'Stewie Griffin'}); // This triggers a change and will alert()
To get the correct version of the js libraries I had to change main.html into this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello-backbonejs</title>
</head>
<body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="model.js" type="text/javascript"></script>
</body>
</html>
I followed the tuto about fullCalendar of Adam Shaw and I can't retrieve events from google calendar. Here is my code:
<!DOCTYPE html>
<html>
<head>
<link href="<?php echo css_url().'fullcalendar.css'; ?>" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php echo js_url().'jquery.js'; ?>"></script>
<script type="text/javascript" src="<?php echo js_url().'fullcalendar.js'; ?>"></script>
<script type='text/javascript' src='fullcalendar/gcal.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});
$(document).ready(function() {
$('#calendar').fullCalendar({
events: $.fullCalendar.gcalFeed(
"http://www.google.com/calendar/feeds/username%40gmail.com/public/basic")
});
});
</script>
</head>
<div id='calendar'></div>
</html
Could you tell me what's wrong please?
You should instantiate the FullCalendar only once. Replace your script tag with this and it should work:
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
events: $.fullCalendar.gcalFeed(
"http://www.google.com/calendar/feeds/username%40gmail.com/public/basic")
});
});
</script>
Let me know if this helps.
EDIT: Fiddle - http://jsfiddle.net/100thGear/JeDFG/. Also, please make sure gcal.js is in the correct path and is included in your HTML