We are trying to load both Ext 3 and Ext 4 with the use of ext-all-sandbox.js to be able to use GeoExt in Ext 4.
Looking in our DOM it seems we have succeeded with loading Ext 3, Ext 4, GeoExt and OpenLayers but are still getting errors like:
"Ext.functionFactory() is not a function" and "Ext.supports is
undefined" .
Is there anyone out there that have tried a similar thing?
This is the index.jsp where we are loading the js files.
<!DOCTYPE HTML>
<%# page pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!-- Ext 4 with sandbox mode -->
<script type="text/javascript" src="../gt-static/extjs/ext-all.js"></script>
<script type="text/javascript" src="../gt-static/extjs/builds/ext-all-sandbox.js">
</script>
<link rel="stylesheet" type="text/css" href="../gt-static/extjs/resources/css/ext-all-gray.css"/>
<link rel="stylesheet" type="text/css" href="../gt-static/extjs/resources/css/ext-sandbox.css">
<!-- Ext 3 -->
<script src="../gt-static/ext-3.2.1/adapter/ext/ext-base.js" type="text/javascript"> </script>
<script src="../gt-static/ext-3.2.1/ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../gt-static/ext-3.2.1/resources/css/ext-all.css"></link>
<!-- OpenLayers -->
<script src="../gt-static/OpenLayers/OpenLayers/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript">
// Start app on ready
Ext4.Loader.onReady(function(){
Ext4.Loader.setConfig({enabled: true});
Ext4.require(['Ext4.picker.Date']);
var head = Ext4.fly(document.getElementsByTagName('head')[0]);
// GeoExt
Ext4.core.DomHelper.append(head, {
tag : 'script',
type : 'text/javascript',
src : '../gt-static/GeoExt/lib/GeoExt.js'
});
Ext4.core.DomHelper.append(head, {
tag : 'script',
type : 'text/javascript',
src : '../gt-static/GeoExt/resources/css/geoext-all-debug.css'
});
Ext4.core.DomHelper.append(head, {
tag : 'script',
type : 'text/javascript',
src : 'app.js'
});
},this,true);
</script>
</head>
<body></body>
</html>
and where we use GeoExt together with Ext 3 and Ext 4:
Ext4.define('GT.controller.Authenticated', {
extend : 'Ext4.app.Controller',
views : [ 'Authenticated' ],
init : function () {
"use strict";
this.control({
'authenticated' : {
render : function () {
var panel = new Ext.Panel({
title : 'EXT3'
});
Ext4.getCmp('mappanel').add(panel);
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 : 'mappanel',
height : 400,
width : 600,
map : map,
title : 'A Simple GeoExt Map'
});
}
}
});
}
});
Screenshots
FireBug - DOM
http://img842.imageshack.us/img842/492/dommq.png
FireBug - Errors - Console
http://img33.imageshack.us/img33/3703/errorsp.png
We managed after alot of problems to solve it:
<script type="text/javascript" src="../gt-static/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script src="../gt-static/ext-3.3.1/ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../gt-static/ext-3.3.1/resources/css/ext-all.css"></link>
<script src="../gt-static/OpenLayers/OpenLayers/OpenLayers.js" type="text/javascript"></script>
<script src="../gt-static/GeoExt/lib/GeoExt.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../gt-static/GeoExt/resources/css/geoext-all.css"></link>
<script type="text/javascript" src="../gt-static/extjs/builds/ext-all-sandbox.js"></script>
<link rel="stylesheet" type="text/css" href="../gt-static/extjs/resources/css/ext-sandbox.css"/>
Now it is possible to load a GeoExt MapPanel into a Ext 4 container.
Now our problem is that the CSS files dosent seem to work as the ext-all-gray.css
If u guys out there have thoughts about that it would be very appreciated
Related
My index page is displaying only "elm" div in the body and not the google-sign-in div and testing h1 as I have in the following index.html.
When I inspected them using browser tools, I did not see the elements.
When I comment out or remove var app = Elm.Main.init({
node: document.getElementById('elm')
}); the browser displays the google div and h1 elements.
What is the reason and how can I solve it?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="google-signin-client_id" content="XXXXX.apps.googleusercontent.com">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="main.js"></script>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<br>
<br>
<h1>Testing</h1>
<div id="elm"></div>
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}
var app = Elm.Main.init({
node: document.getElementById('elm')
});
</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
My Elm program.
-- MAIN
main : Program () Model Msg
main =
Browser.application
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
, onUrlChange = UrlChanged
, onUrlRequest = LinkClicked
}
I also tried changing style of the elm div <div id="elm" style="width:50%; height:400px;"></div>
elm 0.19
Firefox
If you want access to elements in your body along with elm then I would use Browser.element. Otherwise Browser.document and Browser.application manage the body for you (what you are seeing currently).
More information here:
https://package.elm-lang.org/packages/elm/browser/latest/Browser#element
I am new to polymer framework. I am using polymer 2.0.0-rc.3 and latest version of chrome. But below code is not displaying menus.Only "Hello World" is printed in browser. The developer tools console does not show any error.
Below is the code
test-app.html
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<!-- Since 'home' is the default route, eagerly load it. -->
<!-- <link rel="import" href="shop-home.html"> -->
<dom-module id="test-app">
<template>
<H1>Hello World</H1>
<paper-toolbar>
<div class="horizontal-section">
<paper-menu>
<paper-item>Inbox</paper-item>
<paper-item>Starred</paper-item>
<paper-item>Sent mail</paper-item>
<paper-item>Drafts</paper-item>
</paper-menu>
</div>
</paper-toolbar>
</template>
<script>
class testApp extends Polymer.Element {
static get is() { return 'test-app'; }
}
customElements.define(testApp.is, testApp);
</script>
</dom-module>
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>test</title>
<link rel="import" href="src/test-app.html" async>
</head>
<body>
<test-app unresolved>test</test-app>
<script>
window.performance && performance.mark && performance.mark('index.html');
Polymer = {lazyRegister: true, dom: 'shadow'};
(function() {
if ('registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')) {
// platform is good!
} else {
// polyfill the platform!
var e = document.createElement('script');
e.src = 'bower_components/webcomponentsjs/webcomponents-lite.js';
document.body.appendChild(e);
}
})();
</script>
</body>
</html>
bower.json
"polymer": "polymer/polymer#^2.0.0-rc.3",
"app-layout": "polymerelements/app-layout#^0.10.7",
"app-route": "polymerelements/app-route#^0.9.3",
"iron-flex-layout": "polymerelements/iron-flex-layout#^1.3.2",
"iron-form": "polymerelements/iron-form#^1.1.4",
"iron-icon": "polymerelements/iron-icon#^1.0.12",
"iron-pages": "polymerelements/iron-pages#^1.0.8",
"iron-selector": "polymerelements/iron-selector#^1.5.2",
"paper-icon-button": "polymerelements/paper-icon-button#^1.1.4",
"paper-spinner": "polymerelements/paper-spinner#^1.2.1",
"iron-media-query": "polymerelements/iron-media-query#^1.0.8",
"paper-menu": "polymerelements/paper-menu#^1.2.2",
"paper-item": "polymerelements/paper-item#^1.2.1",
"paper-toolbar": "polymerelements/paper-toolbar#^1.1.7"
Does any body have any idea about error? Any guide as how can I debug it to find error?
paper-menu has been deprecated in Polymer 2. As this comment says:
This element is deprecated in favor of paper-listbox, which has been ported already to Polymer 2.0.
I wrote the following code in my test.html:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#item {
background:blue;
color:yellow;
}
</style>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript">
window.onload = function() {
var logo = document.getElementById("item");
TweenLite.to(logo, 2, {left:"542px", backgroundColor:"red", borderBottomColor:"#90e500", color:"white",ease:Expo.easeOut});
}
</script>
</head>
<body>
<p id="item">thsi is a para</p>
</body>
</html>
But when I run it, I get the error message in console
Uncaught ReferenceError: Expo is not defined
at window.onload (test.html:16)
How can I use Expo.easeOut?
To do easing, you have to include EasePack too:
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
(Or use TweenMax instead, wich includes CSSPlugin and EasePack among other features.)
I need to use javascript (with no tag) to setup videojs with below simple codes, but the css seems not loaded correctly, what's the right way for this as the HTML way is ?
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="http://vjs.zencdn.net/5.0/video-js.css" rel="stylesheet" type="text/css">
<script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
<script src="http://vjs.zencdn.net/5.0/video.js"></script>
</head>
<body>
<div id="videoarea"></div>
<script>
var container = document.getElementById("videoarea");
videojs(container, {
controls: true,
class:'video-js vjs-default-skin',
techOrder: ["html5", "flash"],
source: {
type : 'rtmp/mp4',
src : 'rtmp://live.hkstv.hk.lxdns.com/live/hks'
}
}, function() {
});
</script>
</body>
</html>
You have to include an html5 video tag on the page. This ensures proper device fallback and is required for videojs to properly load.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="http://vjs.zencdn.net/5.0/video-js.css" rel="stylesheet" type="text/css">
<script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
<script src="http://vjs.zencdn.net/5.0/video.js"></script>
</head>
<body>
<video id="videoarea" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="640" height="264"> </video>
<script>
var container = document.getElementById("videoarea");
videojs(container, {
controls: true,
class:'video-js vjs-default-skin',
techOrder: ["html5", "flash"],
source: {
type : 'rtmp/mp4',
src : 'rtmp://live.hkstv.hk.lxdns.com/live/hks'
}
}, function() {
});
</script>
</body>
</html>
I'm having problems using a table inside a ContentPane. It seems to work fine in Firefox but is invisible in Internet Explorer 7. The html below demonstrates what I mean. In Firefox you get:
Before Table
This is the table
After Table
In Internet Explorer 7 you get:
Before Table
After Table
No table at all. Does anyone know the cause of this problem?
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://o.aolcdn.com/dojo/1.3.2/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css" href="http://o.aolcdn.com/dojo/1.3.2/dijit/themes/tundra/tundra.css" />
<script djConfig="parseOnLoad:true" type="text/javascript" src="http://o.aolcdn.com/dojo/1.3.2/dojo/dojo.xd.js">
</script>
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.form.Form");
dojo.addOnLoad(initialize);
function initialize() {
var contentPane = new dijit.layout.ContentPane({});
contentPane.domNode.appendChild(document.createTextNode("Before Table"));
var table = document.createElement("table");
var tr = document.createElement("tr");
var td = document.createElement("td");
td.appendChild(document.createTextNode("This is the table"));
tr.appendChild(td);
table.appendChild(tr);
contentPane.domNode.appendChild(table);
contentPane.domNode.appendChild(document.createTextNode("After Table"));
dojo.place(contentPane.domNode, dojo.body(), "first");
}
</script>
</head>
<body class="tundra"></body>
</html>
I found the problem. When creating a table programmatically, you need to make sure you place a tbody node inside the table node (and the tr nodes within that). The following works:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://o.aolcdn.com/dojo/1.3.2/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css" href="http://o.aolcdn.com/dojo/1.3.2/dijit/themes/tundra/tundra.css" />
<script djConfig="parseOnLoad:true" type="text/javascript" src="http://o.aolcdn.com/dojo/1.3.2/dojo/dojo.xd.js">
</script>
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.addOnLoad(initialize);
function initialize() {
var contentPane = new dijit.layout.ContentPane({});
contentPane.domNode.appendChild(document.createTextNode("Before Table"));
var table = document.createElement("table");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
var td = document.createElement("td");
td.appendChild(document.createTextNode("This is the table"));
tr.appendChild(td);
tbody.appendChild(tr);
table.appendChild(tbody);
contentPane.domNode.appendChild(table);
contentPane.domNode.appendChild(document.createTextNode("After Table"));
dojo.place(contentPane.domNode, dojo.body(), "first");
}
</script>
</head>
<body class="tundra"></body>
</html>