I have the below sample code which works fine when I do not render on EXTjs panel. I can see the popup template when I click on the graphic. But when I just move the map render inside extjs panel, the popup template never appears. Please help me to resolve this issue.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Get started with graphics - 4.2</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-debug.css">
<script src="https://js.arcgis.com/4.2/"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all-debug.js"></script>
</head>
<style>
</style>
<script>
</script>
<body>
<div id="panelId" style="top:0px;height:500px"></div>
</body>
<script>
var view = null;
//document.getElementById('panelId').height = window.innerHeight;
require(["esri/config"], function(esriConfig) {
esriConfig.request.corsDetection = true;
corsEnabledServers = ["easyid.scansafe.net","static.arcgis.com","services.arcgisonline.com","localhost:8181"];
});
require([
"esri/Map",
"esri/views/MapView",
"esri/core/watchUtils",
"esri/Graphic",
"esri/geometry/Point",
"esri/geometry/Polyline",
"esri/geometry/Polygon",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"dojo/domReady!"
], function(
Map, MapView,watchUtils,
Graphic, Point, Polyline, Polygon,
SimpleMarkerSymbol, PictureMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol
) {
var map = new Map({
basemap: "topo"
});
view = new MapView({
center: [-80, 35],
container: "viewDiv",
map: map,
zoom: 3
});
/**********************
* Create a point graphic
**********************/
// First create a point geometry (this is the location of the Titanic)
var point = new Point({
longitude: -49.97,
latitude: 41.73
});
// Create a symbol for drawing the point
var markerSymbol = new SimpleMarkerSymbol({
color: [246, 119, 40],
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 0, 255],
width: 4
}
});
// Create a graphic and add the geometry and symbol to it
var pointGraphic = new Graphic({
geometry: point,
symbol: markerSymbol,
popupTemplate:{
title:"Point Graphic",
content:"<b> This is example</b>"
}
});
view.graphics.addMany([pointGraphic]);
});
Ext.create('Ext.panel.Panel', {
title: 'Hello',
layout: 'fit',
width: 1200,
height:window.innerHeight,
html: '<p>World!</p><div style="width:1000px; height:500px;" id="viewDiv"></div>',
renderTo: "panelId",
});
</script>
</html>
