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>
Related
I am trying to use ionic action sheet in my ionic project but in console it is showing error :-
Uncaught ReferenceError: angular is not defined
at controllers.js:1
Can you please help me to resolve this error.
Please see the below code of controllers.js file
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
})
.controller('myCtrl', function($scope, $ionicActionSheet) {
$scope.triggerActionSheet = function() {
// Show the action sheet
var showActionSheet = $ionicActionSheet.show({
buttons: [
{ text: 'Edit 1' },
{ text: 'Edit 2' }
],
destructiveText: 'Delete',
titleText: 'Action Sheet',
cancelText: 'Cancel',
cancel: function() {
// add cancel code...
},
buttonClicked: function(index) {
if(index === 0) {
// add edit 1 code
}
if(index === 1) {
// add edit 2 code
}
},
destructiveButtonClicked: function() {
// add delete code..
}
});
};
})
And following is the code of index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/controllers.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-content>
<button class = "button">Action Sheet Button</button>
</ion-content>
</ion-pane>
</body>
</html>
You included controllers.js before including angular libary. Add angular first
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"/>
before including controllers.js
<script src="js/controllers.js"></script>
<!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.
Here is my app code
Ext.application({
{...}
isIconPrecomposed: false,
name: 'CarboZero',
startupImage: {
'320x460': 'resources/startup/splashscreen.png',
'640x920': 'resources/startup/splashscreen.png',
'640x1096': 'resources/startup/splashscreen.png',
'768x1004': 'resources/startup/splashscreen.png',
'748x1024': 'resources/startup/splashscreen.png',
'1536x2008': 'resources/startup/splashscreen.png',
'1496x2048': 'resources/startup/splashscreen.png'
},
launch: function() {
Ext.create('CarboZero.view.InitView', {fullscreen: true});
}
});
When it lauches in IOS simulator, it still shows the sencha logo startup image... why? Do I need to do something more to get it working?
Did you try to edit your index.html file? Theoretically it should eliminate the splash screen. Here's how I did it:
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>YourApp title</title>
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script id="microloader" type="text/javascript" src="touch/microloader/development.js">
</script>
</head>
<body>
</body>
</html>
`
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.
This is my EXTJS code:
Ext.onReady(function(){
var treeLoader=new Ext.tree.TreeLoader({
dataUrl:'json.php'
});
var rootNode=new Ext.tree.AsyncTreeNode({
text:'Root'
});
var tree=new Ext.tree.TreePanel({
renderTo:'treecontainer',
loader:treeLoader,
root:rootNode
});
});
HTML code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tree Formation </title>
<link rel=stylesheet" type="text/css" href="ext-all.css" />
<script src="ext-base.js"> </script>
<script src="ext-all.js"> </script>
</head>
<body>
<script src="tree.js"> </script>
<title id="title">Tree Formed</title>
</body>
<div id="treecontainer" style="height:300px;width:200px;">
</div>
<html>
Json.php:
[
{id:'1',text:'No Children',leaf:true},
{id:'2'.text:'Has Children',
children:[{
id:'3',
text:'Youngster',
leaf:true
}]
}
After executing the above code,it's displaying with only 'Root' as done,rest not displaying.When i click on that 'Root' Error encountered as "ACCESS IS DENIED" at LINE 7,CHAR 20287 in ext-base.js.Can u tell me what it's ....?
]
Looks like you don't have the correct path to your Json.php file, or you don't have read access.