Startup image - splashscreen - extjs

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>
`

Related

What's wrong in my code below, I am not getting output

<!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.

extjs 5 Ext.draw.Container

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>

Extjs can not work

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.

Backbone change trigger is never called

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>

Error in ext-base.js

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.

Resources