I try to display images from an url at a page. But it wont display. I dont know what wrong but I need help from someone.
This is html code. Index.html
<html><head>
<title>Hello World</title>
<style>
.hello {
background:#000000;
background-image:url(http://24.media.tumblr.com/tumblr_l4l2wdQYkw1qayuxao1_500.png);
}
.world {
background:#ffffff;
background-image:url(http://37.media.tumblr.com/tumblr_l41spq8tIq1qz7ywoo1_500.png);
background-repeat:no-repeat;
}
</style>
<script type="text/javascript" src="touch/sencha-touch.js"></script>
<link href="touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="app.js"></script>
<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
This is the code for app.js
requires: [
'Ext.MessageBox'
],
views: [
'Main'
],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
this.tabs = new Ext.TabPanel({
fullscreen: true,
tabBar: {
ui: 'light',
layout: {
pack:'center'
}
},
items: [
{docked:'top', xtype:'toolbar', title:'Hello World'},
{cls:'hello', title:'Hello'},
{cls:'world', title:'World'}
]
});
}
Above is a code that make from this tutorial http://www.sencha.com/learn/taking-sencha-touch-apps-offline/
can any one help me solve this problem. Thank you.
At the bottom of the launch function, add the tabpanel to the viewport. You have created the tabpanel, but it is merely an object in memory at this point. It is not rendered anywhere.
launch: function () {
...
Ext.Viewport.add(this.tabs);
}
Related
I have one website link which currently is working when clicking the link a window pop-up, but I want the onclick to happen automatically without clicking. The onclick should work like onload.
I tried a lot of Google and StackOverflow searches.. but I couldn't find the exact solution to my problem.
Here's my code below:
<!DOCTYPE html>
<html>
<head>
<title>mygame | Browser</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="../api.js"></script>
<script type="text/javascript">
function initialize() {
document.getElementById('robrowser').addEventListener("click", function(){
var ROConfig = {
type: ROBrowser.TYPE.POPUP,
application: ROBrowser.APP.ONLINE,
remoteClient: "http://play.mygame.com/client",
width: 1024,
height: 768,
development: false,
servers: [{
display: "mygame",
desc: "mygame Revolution",
address: "94.99.190.98",
port: 6900,
version: 46,
langtype: 12,
packetver: 20170614,
packetKeys: false,
socketProxy: "ws://196.66.646.179:5999/"
}],
saveFiles: true,
skipServerList: true,
skipIntro: true,
version: 1,
plugins: {
IntroMessage: {}
}
};
var RO = new ROBrowser(ROConfig);
RO.start();
}, false );
}
window.addEventListener("load", initialize, false);
</script>
</head>
<body>
<input type="button" value="Run roBrowser" id="robrowser"/>
</body>
You can simulate a buttonclick like this:
$("#robrowser").click();
In this case you want to run the method when a page is loaded.
You can just remove the entire onclick listener and call the function initialize() directly:
function initialize() {
var ROConfig = {
type: ROBrowser.TYPE.POPUP,
application: ROBrowser.APP.ONLINE,
remoteClient: "http://play.mygame.com/client",
width: 1024,
height: 768,
development: false,
servers: [{
display: "mygame",
desc: "mygame Revolution",
address: "94.99.190.98",
port: 6900,
version: 46,
langtype: 12,
packetver: 20170614,
packetKeys: false,
socketProxy: "ws://196.66.646.179:5999/"
}],
saveFiles: true,
skipServerList: true,
skipIntro: true,
version: 1,
plugins: {
IntroMessage: {}
}
};
var RO = new ROBrowser(ROConfig);
RO.start();
}
initialize();
The following changes have been made:
button on click event listener moved into the window load function
The source code from the button click event moved into initialize()
button on click event to target the function initialize
window load function calls/executes initialize()
Source code:
<!DOCTYPE html>
<html>
<head>
<title>mygame | Browser</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="../api.js"></script>
<script type="text/javascript">
function initialize() {
var ROConfig = {
type: ROBrowser.TYPE.POPUP,
application: ROBrowser.APP.ONLINE,
remoteClient: "http://play.mygame.com/client",
width: 1024,
height: 768,
development: false,
servers: [{
display: "mygame",
desc: "mygame Revolution",
address: "94.99.190.98",
port: 6900,
version: 46,
langtype: 12,
packetver: 20170614,
packetKeys: false,
socketProxy: "ws://196.66.646.179:5999/"
}],
saveFiles: true,
skipServerList: true,
skipIntro: true,
version: 1,
plugins: {
IntroMessage: {}
}
};
var RO = new ROBrowser(ROConfig);
RO.start();
}
window.addEventListener("load", function(){
document.getElementById('robrowser').addEventListener("click", initialize, false );
initialize();
}, false);
</script>
</head>
<body>
<input type="button" value="Run roBrowser" id="robrowser"/>
</body>
</html>
If you have any questions about the source code above please leave a comment below and I will get back to you as soon as possible.
I hope this helps, happy coding!
I want to design some slides by Javascript, and use the Reveal library and follow the template
https://github.com/hakimel/reveal.js/blob/master/index.html
and plan to embed a charts into the slides by echarts library and follow this demo
http://ecomfe.github.io/echarts/doc/start-en.html
I put these two library as follow directory without any change of echarts/reveal library.
|--echarts-2.2.0
|--reveal.js
\--mySlides.html
When I merged these two demo together, I got the "anonymous function" of "require.config". No idea how to debug it. Anyone can help it? Thanks.
Uncaught ReferenceError: Reveal is not defined
(anonymous function) mySlides.html:36
mySlides.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>reveal.js - The HTML Presentation Framework</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="reveal.js/css/reveal.css">
<link rel="stylesheet" href="reveal.js/css/theme/black.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="reveal.js/lib/css/zenburn.css">
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section id="page1" data-background="#ff0000">
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="echarts-2.2.0/build/dist/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: 'echarts-2.2.0/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
myChart.setOption(option);
}
);
</script>
</section>
<section id="page2"><p>Page2</p></section>
</div>
</div>
<script src="reveal.js/lib/js/head.min.js"></script>
<script src="reveal.js/js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'reveal.js/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'reveal.js/plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'reveal.js/plugin/zoom-js/zoom.js', async: true },
{ src: 'reveal.js/plugin/notes/notes.js', async: true }
]
});
</script>
</body>
It looks like you're missing the requirejs file loader. Put this in the header of your file and let me know if that fixes it.
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.16/require.js"></script>
I'm new to using both RequireJS and Magnific Popup, and I was wondering if anyone had successfully gotten them to play nice together. If so, what was the basic structure of your code?
Thank you!
First setup an emtry point in your html file:
<!DOCTYPE html>
<html>
<body>
<script data-main="entrypoint" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js"></script>
</body>
</html>
Then in entrypoint.js you can configure jquery and magnific popup:
require.config({
paths : {
jquery : '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min',
magnificpopup : 'path/to/magnific-popup.min',
},
shim: {
'magnificpopup': ['jquery']
}
});
require([ 'popuptest' ], function(popuptest) {
popuptest.show();
});
Finally, on popuptest.js we can open a youtube popup like this:
define(['jquery', 'magnificpopup'], function($, magnificpopup) {
return {
show: function() {
$.magnificPopup.open({
items: {
src: 'https://www.youtube.com/watch?v=btPJPFnesV4'
},
type: 'iframe',
iframe: {
cursor: null,
titleSrc: function(item) {
return 'Video title';
},
patterns: {
youtube_short: {
index: 'youtu.be/',
id: 'youtu.be/',
src: '//www.youtube.com/embed/%id%?autoplay=1'
}
}
}
});
}
});
});
Hope this helps.
I'm want to learn extjs so I'm a newbie, so sorry for any stupid question here..
Here is my index.html page :
<html>
<head>
<meta charset="UTF-8">
<title>Test Hello</title>
<script type="text/javascript" src="extjs-4.2.1-gpl/ext-all.js"></script>
<script type="text/javascript" src="extjs-4.2.1-gpl/ux/form/LoginForm.js"></script>
<!-- <link href="extjs-4.1.1a/KitchenSink-all.css" rel="stylesheet" type="text/css" /> -->
<link href="extjs-4.2.1-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div align="center" id= "content" >
<script type="text/javascript">
var loginForm = Ext.create("test.view.form.LoginForm", {
id : "panellogin",
renderTo : 'content'
});
</script>
</div>
</body>
</html>
And LoginForm :
Ext.define('test.view.form.LoginForm', {
extend: 'Ext.form.Panel',
xtype : "test.view.form.LoginForm",
title: 'Login',
frame:true,
width: 320,
bodyPadding: 20,
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
initComponent: function() {
var me = this;
me.items = [me.contentPanel];
me.contentPanel = Ext.create("Ext.grid.Panel", {
border: true,
align :"center",
layout: {
type: "hbox",
align: "center"
},
items: [
{
allowBlank: false,
fieldLabel: 'User ID',
name: 'user',
emptyText: 'user id'
},
{
allowBlank: false,
fieldLabel: 'Password',
name: 'pass',
emptyText: 'password',
inputType: 'password'
},
{
xtype:'checkbox',
fieldLabel: 'Remember me',
name: 'remember'
}
]
});
}
});
What did I exactly is:
Downloaded extjs 4.2.1-gpl from sencha website (about 65 Mo compressed)
When I found the huge size I delete things like examples, docs
Moved src inside a directory named ux inside 4.2.1-gpl directory
Kept resources, images and locale folders.
I need advice please, is this a good way to do? I can't put the whole content since it is more than 300 Mio! What to keep, please?
Firebug is showing me this error : TypeError: c is undefined (in ext-all.js line 21)
Google chrome is showing this : Uncaught TypeError: Cannot read property 'length' of undefined
Kind regards,
Could you please tell what's happen
Execute your code after the extjs sources are loaded (Ext.onReady...):
Ext.onReady(function () {
var loginForm = Ext.create("test.view.form.LoginForm", {
id : "panellogin",
renderTo : 'content'
});
});
This is not like you should have done. Especially deleting stuff and renaming src to ux. Also a class definition of test.view.form.LoginForm should be in the file app/view/form/LoginForm.js, not ux/form.
Read the doc how to get started, especially MVC Application Architecture and the App Architecture Series.
By default my website are having multi tabs, when just refresh the web site, the first tabs haven't loaded, then i clicked second tabs. second tabs are working fine, but when u go back first tabs, it is blank.
p/s: when the first tabs are haven't loaded finish, u are click a new tabs, that will cause this error from ext-all.js
TypeError: b.getComputedStyle(...) is null
...f(p==k){if(a+E+l.width>(O>=0?u.x+u.width-b:b-u.x)){p=M}}else{if(a+E>l.width){p=k...
2
all the tabs header are included ext-all.js
example tab 1 vehicle.html header code
<script type="text/javascript" src="../resources/js/ext-all.js"></script>
<link rel="stylesheet" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../resources/js/checkcookie.js?<?php echo time(); ?>"></script>
<script type="text/javascript" src="vehicle.js?<?php echo time(); ?>"></script>
example tab 2 driver.html header code
<script type="text/javascript" src="../resources/js/ext-all.js"></script>
<link rel="stylesheet" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../resources/js/checkcookie.js?<?php echo time(); ?>"></script>
<script type="text/javascript" src="driver.js?<?php echo time(); ?>"></script>
this is my tabs code
Ext.onReady(function() {
var currentItem;
var WinWidth = 1;
var tabs = Ext.widget('tabpanel', {
renderTo: 'tabs',
id : 'tabspanel',
cls : 'MainPanel',
resizeTabs: true,
enableTabScroll: true,
width: window.innerwidth,
height: window.innerHeight - 30, //30 because menu height is 30px
tabBar: {
layout: { pack: 'center' }
},
defaults: {
autoScroll: false, //close the tab scrolling
bodyPadding: 0 //must 0,not margin at all
},
items: [
{
closable: false,
html: '<div style="width:100%; height:100%; background-color:#cccccc;"><iframe src="vehicle/vehicle.html" frameborder=0 scrolling="no" style="width:100%; height:100%;"></iframe></div>',
iconCls: 'bus32',
title: 'Vehicle Manage'
},
{
closable: false,
html: '<div style="width:100%; height:100%; background-color:#cccccc;"><iframe src="driver/driver.html" frameborder=0 scrolling="no" style="width:100%; height:100%;"></iframe></div>',
iconCls: 'tabuser',
title: 'Driver Manage'
},
{
closable: false,
html: '<div style="width:100%; height:100%; background-color:#cccccc;"><iframe src="location/location.html" frameborder=0 scrolling="no" style="width:100%; height:100%;"></iframe></div>',
iconCls: 'location32',
title: 'Location Manage'
},
{
closable: false,
html: '<div style="width:100%; height:100%; background-color:#cccccc;"><iframe src="route/route.php" frameborder=0 scrolling="no" style="width:100%; height:100%;"></iframe></div>',
iconCls: 'route32',
title: 'Route Manage'
}
],
plugins: Ext.create('Ext.ux.TabCloseMenu', {
extraItemsTail: [
'-',
{
text: 'Closable',
checked: true,
hideOnClick: true,
handler: function (item) {
currentItem.tab.setClosable(item.checked);
}
},
'-',
{
text: 'Enabled',
checked: true,
hideOnClick: true,
handler: function(item) {
currentItem.tab.setDisabled(!item.checked);
}
}
],
listeners: {
aftermenu: function () {
currentItem = null;
},
beforemenu: function (menu, item) {
menu.child('[text="Closable"]').setChecked(item.closable);
menu.child('[text="Enabled"]').setChecked(!item.tab.isDisabled());
currentItem = item;
}
}
})
});
By Default are having 4 tabs, it is very hard to explain what i m facing. hope those information are enough to let u all understand, apologize if any thing let u confuse
ADDITIONAL INFO
i have tried to load different page load different file ext-all.js
example tab 1 load ext-all.js and tab 2 load ext-all2.js , it is working fine
To start off, you really should load Extjs in the main document and not in the iframes. In no case you need to load ex-all.js and ext-all2.js, like you tried.
Then, try to load the tab contents with ajax as #Damask suggests. You could do this using the loader config or using Ext.Ajax.
Also, do not use ext-all.js for development, because it is minified, and the errors you get are not easy to interpret. Instead of this, use ext-debug.js, like recommended here, or even better, use ext-dev.js. These work with Ext.Loaderand load only the classes you need.
check your component ids. It may do to the duplication
What forced you to use iframes with ExtJS ? Is it really justified ? Use ajax for tabs loading. It will prevent you from iframe related issues.