Cannot read property 'length' of undefined (print map with geoserver) - javascript

am trying to work with print with geoserver geoext/ext to print a map.
i successed to install the print plugin, since localhost:8080/geoserver/pdf/info.json?var=printCapabilities shows the print capabilities.
THE PROBLEM: when i try to load the page with the map and the print button i get this error:
Uncaught TypeError: Cannot read property 'length' of undefined ext-all.js:21
Ext.extend.readRecords ext-all.js:21
Ext.data.Store.Ext.extend.loadData ext-all.js:21
GeoExt.data.PrintProvider.Ext.extend.loadStores PrintProvider.js:548
GeoExt.data.PrintProvider.Ext.extend.constructor PrintProvider.js:342
(anonymous function) TestPrint.html:22
(anonymous function) ext-all.js:21
b
i can't figure out the problem so here's my TestPrint.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>
A map
</title>
<script src="../ext-3.4.1/adapter/ext/ext-base.js"" type="text/javascript"></script>
<script src="../ext-3.4.1/ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../ext-3.4.1/resources/css/ext-all.css">
<script src="../openlayers/OpenLayers.js" type="text/javascript"></script>
<script src="../openlayers/lib/deprecated.js" type="text/javascript"></script>
<script src="../GeoExt/lib/GeoExt.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../GeoExt/resources/css/geoext-all-debug.css">
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript">
var mapPanel, printDialog;
Ext.onReady(function() {
// The PrintProvider that connects us to the print service
var printProvider = new GeoExt.data.PrintProvider({ **// this is line 22**
method: "GET", // "POST" recommended for production use
capabilities: "http://localhost:8080/geoserver/pdf/info.json?var=printCapabilities", // provide url instead for lazy loading
customParams: {
mapTitle: "GeoExt Printing Demo",
comment: "This demo shows how to use GeoExt.PrintMapPanel"
}
});
// A MapPanel with a "Print..." button
mapPanel = new GeoExt.MapPanel({
renderTo: "content",
width: 500,
height: 350,
map: {
maxExtent: new OpenLayers.Bounds(
143.835, -43.648,
148.479, -39.574
),
maxResolution: 0.018140625,
projection: "EPSG:4326",
units: 'degrees'
},
layers: [new OpenLayers.Layer.WMS("Tasmania State Boundaries",
"http://demo.opengeo.org/geoserver/wms",
{layers: "topp:tasmania_state_boundaries"},
{singleTile: true, numZoomLevels: 8})],
center: [146.56, -41.56],
zoom: 0,
bbar: [{
text: "Print...",
handler: function(){
// A window with the PrintMapPanel, which we can use to adjust
// the print extent before creating the pdf.
printDialog = new Ext.Window({
title: "Print Preview",
layout: "fit",
width: 350,
autoHeight: true,
items: [{
xtype: "gx_printmappanel",
sourceMap: mapPanel,
printProvider: printProvider
}],
bbar: [{
text: "Create PDF",
handler: function(){ printDialog.items.get(0).print(); }
}]
});
printDialog.show();
}
}]
});
});
</script>
</head>
<body>
<div id='content'></div>
</body>
</html>

If you check the docs, here: http://geoext.org/lib/GeoExt/data/PrintProvider.html
It says capabilities is the actual object returned from the url, so you could probably just give the url to the url property. That is, change line 24 from:
capabilities: "http://localhost:8080/geoserver/pdf/info.json?var=printCapabilities", // provide url instead for lazy loading
to:
url: "http://localhost:8080/geoserver/pdf/info.json?var=printCapabilities", // provide url instead for lazy loading
No guarantee that will solve all your problems, though. Otherwise I would set a break point with firebug or so on line 22 and step debug.

Related

Uncaught (in promise) TypeError: Cannot read property 'ui5' of undefined

When I try to create a BarChart in js view tab, it gives me this error.
Here is my html code
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<link rel="stylesheet" type="text/css" href="Styles/MainPage.css"/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m, sap.viz"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("empcrud");
//sap.ui.localResources("Styles");
var app = new sap.m.App("AppId", { initialPage: "idEMainPage1" });
var page = sap.ui.view({ id: "idEmpDetails1", viewName: "empcrud.EmpDetails", type: sap.ui.core.mvc.ViewType.JS });
var page1 = sap.ui.view({ id: "idEMainPage1", viewName: "empcrud.MainPage", type: sap.ui.core.mvc.ViewType.JS });
var page2 = sap.ui.view({ id: "idGrafPage1", viewName: "empcrud.Grafik", type: sap.ui.core.mvc.ViewType.JS });
app.addPage(page).addPage(page1).addPage(page2);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
And here is my view code where I use sap.viz.ui5
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [
{
axis: 1,
name: 'Uname',
value: "{Uname}"
}
],
measures: [
{
name: 'Modno',
value: '{Modno}'
},
],
data: {
path: "/results"
}
});
var oBarChart = new sap.viz.ui5.Bar({
width: "80%",
height: "400px",
plotArea: {
//'colorPalette' : d3.scale.category20().range()
},
title: {
visible: true,
text: 'Modno Grafiği'
},
dataset: oDataset
});
When I try to paste my view code in html script its works fine, also with xml view it works. I think its about the connection between js view and html. However view can not see sap.viz.Is there a way to define sap.viz in js or how can I overcome that?
Thanks.
The problem is about sapui lib, just add online core library and just works fine.
"https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"

Javascript browser inspector console vs source code

This is my problem:
I was playing with ECharts JavaScript library, I wanted to retrieve the image data (I know there is a save as image toolbox). When I try to access the function getDataUrl, or getConnectedDataUrl, I get the following error:
"myChart.getDataUrl is not a function"
But when I try to do the same on the browser (or Firebug) console, I get the info I want. When I call get_data() on the console also get the error I mention before. I'm confused.
What am I doing wrong?
There is the example code:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button type="button" onclick="get_data()">holi</button>
<div id="main" style="width:400px;height:300px;"></div>
<script src="echarts.min.js"></script>
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main'));
// specify chart configuration item and data
var option = {
title: {
text: 'Test'
},
tooltip: {},
legend: {
data:['Cosas']
},
xAxis: {
data: ["asdf","qwerty","lol"]
},
yAxis: {},
series: [{
name: 'Cosas',
type: 'bar',
data: [1, 3, 5]
}],
toolbox: {
show : true,
feature : {
mark : {show: false},
saveAsImage : {show: true, title: "save"}
}
}
};
// use configuration item and data specified to show chart
myChart.setOption(option);
function get_data(){
return myChart.getConnectedDataUrl();
};
</script>
</body>
</html>
You just misspelled the function names. They are called getDataURL() and getConnectedDataURL() (with uppercase URL).

Cannot read property 'Chart' of undefined

I want to present a pie chat, the data came from csv file (excel).
I have html file (index.html) and js file (loadData2.js),
when I print the data in js file I get It like : word,number
donald,8
trump,12
refused ,2
to,7
release ,3
his,6
so I see the data ok.
one field is a word and the other is a number.
I get an error: "Uncaught TypeError: $(...).CanvasJSChart is not a function(…)"
my html code:
<!DOCTYPE html>
<html>
<head>
<title>hw 1</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="includes/loadData2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="canvas/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
<script>
(function(){
getData2();
})();
</script>
</div>
</body>
</html>
my js code:
function getData2()
{
console.log("hello");
$.get('data/words.csv', function(data) {
console.log(data);
//Better to construct options first and then pass it as a parameter
var options = {
exportEnabled: true,
animationEnabled: true,
title: {
text: "Exporting Chart as Image"
},
data: [
{
type: "splineArea", //change it to line, area, bar, pie, etc
dataPoints: [data]
}
]
};
$("#chartContainer").CanvasJS.Chart(options);
});
}
what I need to do to in order to see my chart on the screen?
Thanks,
You are including CanvasJs, and trying to use its jQuery plugin.
replace <script src="canvas/canvasjs.min.js"></script> by the right file and it'll work.
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/jquery.canvasjs.min.js"></script>
To create a Chart using the regular library would go like this :
var options = {
exportEnabled: true,
animationEnabled: true,
title: {
text: "Exporting Chart as Image"
},
data: [
{
type: "splineArea", //change it to line, area, bar, pie, etc
dataPoints: [data]
}
]
};
var chart = new CanvasJS.Chart("chartContainer",options);
chart.render

ExtJs 5.1 - Ext.tree.panel - store from Json-Object derived from unknown xml file

In ExtJs 5.1 it is possible to create an Ext.tree.Panel from a Json-object given that the Json-object uses the named values root and children to declare the nesting, for example:
<!-- Example 1 -->
<!DOCTYPE html>
<html>
<head>
<!-- ext imports -->
<script type="text/javascript" language="javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<script type ="text/javascript">
Ext.onReady(function(){
var normal_store = {
root:{
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "algebra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
};
console.log(normal_store);
var tree_panel_1 = Ext.create('Ext.tree.Panel', {
title: 'tree_panel_1',
store: normal_store,
rootVisible: true,
renderTo: Ext.getBody()
});
});
</script>
</head>
<body>
</body>
Lets say that I create a string-variable from a xml-file.
Then from the string-variable I create a Json-object.
The only thing I know in advance about the xml-file is, that it is valid xml, but nothing else like tag-names and attributes etc..
I can go from the xml-file to string-variable by using Jquery.
Likewise I can go from string-variable to Json-object by using the Xml-To-Json Library.
Having this Json-Object I have tried to populate an Ext.tree.Panel in a similar fashion as in example 1:
<!-- Example 2 -->
<!DOCTYPE html>
<html>
<head>
<!-- ext imports -->
<script type="text/javascript" language="javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<!-- jquery and jsonToXml imports -->
<script type="text/javascript" language="javascript" src="/jquery/jquery-1.11.3.js"></script>
<script src="/xmlToJson/jquery.xml2json.js" type="text/javascript" language="javascript"></script>
<script type ="text/javascript">
Ext.onReady(function(){
//i only know that it is valid xml, but nothing about how many tag types, names, attributes etc.
var xml = $.ajax({type: "GET", url: "path/to/varying.xml", async: false}).responseText;
var json = $.xml2json(xml);
console.log(json);
var tree_panel_1 = Ext.create('Ext.tree.Panel', {
title: 'tree_panel_1',
store: json,
rootVisible: true,
renderTo: Ext.getBody()
});
});
</script>
</head>
<body>
</body>
But, it doesn't show the xml as a tree. I also know why:
ExtJs can only generate such a tree if the Json-object uses the named values root and children to identify the nesting level of the tree which is being produced.
So my questions are:
Question 1: Does anyone know wether it is possible to create trees from general Json-objects in ExtJs using Ext-capabilities like Json-Reader etc. pp.?
If Question 1 is negative: Do I have to write the iteration logic over the Json-object and build the Json-object with the proper named values root and children myself to pass them as a store?
All you need is to convert the result of $.xml2json(xml) (i.e. what you call "general" JSON-object) to JSON object that Ext.tree.Panel can understand — a JSON object with root, children etc. The actual implementation will depend on how your "general" JSON obtained from XML looks like. It will be just a matter of iterating over it and building new JSON. This can be implemented in a custom reader.

Why does this ExtJS code get the error "this.el is null"?

I want to simply be able to click a button and execute some ExtJS code for testing, but this ExtJS code gives me the error this.el is null. What do I have to do to get this code to work?
main.js:
Ext.onReady(function() {
var button = new Ext.Button('button-div', {
text: 'hello',
handler: function() {
alert('pressed');
}
});
viewport = new Ext.Viewport({
layout: 'border',
items: [ button ]
});
viewport.doLayout();
});
html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="ext/ext-all-debug.js">
</script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
</body>
</html>
Working Code:
Thanks for the pointer #Mchl, it now works with this code:
Ext.onReady(function() {
var button = new Ext.Button({
text: "Click this",
handler: function() {
alert('pressed');
}
});
var regionContent = new Ext.Panel({
region: 'center',
padding:'10',
autoScroll: true,
items: [ button ]
});
viewport = new Ext.Viewport({
layout: 'border',
items: [ regionContent ]
});
viewport.doLayout();
});
You're using a layout: 'border' which makes your viewport use Ext.layout.BorderLayout. In the documentation for this layout you'll find this note:
Any container using the BorderLayout must have a child item with
region:'center'. The child item in the
center region will always be resized
to fill the remaining space not used
by the other regions in the layout.

Categories