I'm new to extjs and cant find a way to put a google StreetView inside a panel. Can someone point me in the right direction?. I have tried from interpreting an html inside a panel to the old GMapPanel but I doesn't work.
Currently I have this function where the panel shows up but doesn't show the street view
function () {
alert("mostrar street view");
new Ext.Panel({
id: "streetView",
xtype: "map",
constrain: true,
floating: true,
resize: true,
width: 600,
height: 400,
closable: true,
style: {
backgroundColor: "#fff",
//backgroundColor: '#000',
border: "1px solid black",
},
listeners: {
click: Ext.Window({
layout: "fit",
closeAction: "hide",
title: "GPanorama Window",
width: 400,
height: 300,
x: 480,
y: 60,
items: {
xtype: "gmappanel",
gmapType: "panorama",
setCenter: {
lat: 42.345573,
long: -71.098326,
},
},
}),
},
draggable: {
delegate: "div",
},
}).show();
I have also tried placing the property html as follows html:'CODE-BELOW'
<head>
<title>Street View split-map-panes</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map,
#pano {
float: left;
height: 100%;
width: 50%;
}
</style>
<script>
function initialize() {
const fenway = { lat: 42.345573, lng: -71.098326 };
const map = new google.maps.Map(document.getElementById("map"), {
center: fenway,
zoom: 14,
});
const panorama = new google.maps.StreetViewPanorama(
document.getElementById("pano"),
{ position: fenway, pov: { heading: 34, pitch: 10 } }
);
map.setStreetView(panorama);
}
</script>
</head>
<body>
<div id="map"></div>
<div id="pano"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=API-KEY&callback=initialize&libraries=&v=weekly"
async></script>
</body>
Despite the same configuration works as expected on Firefox, the icon is not displayed on Chrome.
Here is my actioncolumn configuration:
xtype : 'actioncolumn',
width : 95,
align : 'center',
sortable : false,
menuDisabled: true,
items : [{
iconCls : 'icon-delete',
tooltip : 'Delete',
handler: function(grid, rowIndex, colIndex, node, e, record, rowNode) {
// delete action
}
}]
Here is the .css rules for the actioncolumn and the related iconCls:
.x-action-col-icon {
color: #919191;
font-size: 18px;
height: 18px;
width: 18px;
cursor: pointer;
vertical-align: middle;
display: inline-block;
line-height: 1;
}
.icon-delete:before {
font: 18px/1 FontAwesome;
color: #dd6550;
content: "\f056";
}
The screenshot for Chrome:
And for Firefox:
Please check this fiddle, I have checked it and found working fine in both Chrome and Firefox browser.
Note: As of now I have included font-awesome and css (provided by you) in index.html
Screenshots attached:
I want to create a doughnut highchart using angular js.
javascript is-
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Browser<br>shares<br>2015',
align: 'center',
verticalAlign: 'middle',
y: 40
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: -180,
endAngle: 180,
center: ['50%', '55%']
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [
['Firefox', 10.38],
['IE', 56.33],
['Chrome', 24.03],
['Safari', 4.77],
['Opera', 0.91],
{
name: 'Proprietary or Undetectable',
y: 0.9,
dataLabels: {
enabled: false
}
}
]
}]
});
});
html is-
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
and I am including these scripts files -
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
How would I convert the above script in angular js. Can anyone help me on this?
I think some directive function needs to be created.I am new to custom directives in angular, can anybody help how we do this in angular for the doughnut highchart?
No need to convert the highcharts in angular as its already exists. No need to inject the dependencies. You can use it directly. Just inject the highcharts
files
<script src="script/chart/highcharts.js"></script>
<script src="script/chart/highcharts-more.js"></script>
<script src="script/chart/drilldown.js"></script>
<script src="script/chart/highcharts-3d.js"></script>
<script src="script/chart/exporting.js"></script>
as per need. and in controller use directly the Highcharts.chart({//code goes here}). Here is the link for donut highchart
Can any one help me to display image totally in the image panel.50% of the screen should display image and another 50% has some menus. In the 50% image block , I am not getting image fully. Here is my snippet.
Ext.define('scheduler.view.Main', {
extend: Ext.Panel,
xtype: 'main',
config: {
fullScreen: true,
layout: 'vbox',
scrollable: true,
cls: 'mainLayout',
height: '100%',
items: [
{
cls: 'mainbackgpanl',
docked: 'top',
height: '50%'
},
{
xtype: 'spacer'
},
{
xtype: 'panel',
layout: {
type: 'hbox',
pack: 'center'
},
items: [
{
xtype: 'button',
width: '50%',
layout: {
pack: 'center'
},
ui: 'normal',
text: '<div align="center"><img width="64px" height="64px" src="resources/images/calendar-icon.png" style="vertical-align: middle"><br /><p class="icon_text">Calendar</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onCalendarTap();
}
},
{
xtype: 'button',
ui: 'normal',
width: '50%',
layout: {
pack: 'center'
},
text: '<div align="center"><img width="64px" height="64px" src="resources/images/book-event.png" style="vertical-align: middle"><br /><p class="icon_text">Book Event</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onBookEventTap();
}
}
]
},
{
xtype: 'spacer'
},
{
xtype: 'panel',
layout: 'hbox',
items: [
{
xtype: 'button',
ui: 'normal',
width: '50%',
layout: {
pack: 'center'
},
text: '<div align="center"><img width="64px" height="64px" src="resources/images/events.png" style="vertical-align: middle"><br /><p class="icon_text">Events</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onEventsTap();
}
},
{
xtype: 'button',
ui: 'normal',
width: '50%',
layout: {
pack: 'center'
},
text: '<div align="center"><img width="64px" height="64px" src="resources/images/blocked.png" style="vertical-align: middle"><br /><p class="icon_text">Blocked</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onBlockedTap();
}
}
]
},
{
xtype: 'spacer'
}
]
}
});
and here is my css
.mainbackgpanl > div{
background: url("http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg") center ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size:cover;
}
Thanks in Advance.
In trying to simplify your use case, I come up with this code:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
layout: "fit",
items: [{
layout: 'hbox',
items: [{
xtype: 'button',
ui: 'normal',
width: '50%',
layout: {
pack: 'center'
},
text: '<div align="center"><img width="64px" height="64px" src="resources/images/events.png" style="vertical-align: middle"><br /><p class="icon_text">Events</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onEventsTap();
}
}, {
xtype: 'button',
ui: 'normal',
width: '50%',
layout: {
pack: 'center'
},
text: '<div align="center"><img width="64px" height="64px" src="resources/images/blocked.png" style="vertical-align: middle"><br /><p class="icon_text">Blocked</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onBlockedTap();
}
}]
}]
});
}
});
Which apart from not loading the images (as I do not have them) it works fine, you can see a Sencha Fiddle HERE.
The main difference between my code and yours is that I have a parent panel with layout: 'fit' so that it takes up all the space available, then added the hbox layout in two child components below.
EDIT: If you are trying to make the images fill the containers so that they are both 50% width, you'll need to remove the height and width attributes width="64px" height="64px". ExtJs has an Image component which may be better to use in this case.
I think your code actually works fine if you were to change fullScreen to fullscreen have a look at the demo here
Ext.define('scheduler.view.Main', {
extend: Ext.Panel,
xtype: 'main',
config: {
fullscreen: true,
layout: 'vbox',
scrollable: true,
cls: 'mainLayout',
height: '100%',
items: [{
cls: 'mainbackgpanl',
docked: 'top',
height: '50%'
}, {
xtype: 'spacer'
}, {
xtype: 'panel',
layout: {
type: 'hbox',
pack: 'center'
},
items: [{
xtype: 'button',
width: '50%',
layout: {
pack: 'center'
},
ui: 'normal',
text: '<div align="center"><img width="64px" height="64px" src="resources/images/calendar-icon.png" style="vertical-align: middle"><br /><p class="icon_text">Calendar</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onCalendarTap();
}
}, {
xtype: 'button',
ui: 'normal',
width: '50%',
layout: {
pack: 'center'
},
text: '<div align="center"><img width="64px" height="64px" src="resources/images/book-event.png" style="vertical-align: middle"><br /><p class="icon_text">Book Event</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onBookEventTap();
}
}]
}, {
xtype: 'spacer'
}, {
xtype: 'panel',
layout: 'hbox',
items: [{
xtype: 'button',
ui: 'normal',
width: '50%',
layout: {
pack: 'center'
},
text: '<div align="center"><img width="64px" height="64px" src="resources/images/events.png" style="vertical-align: middle"><br /><p class="icon_text">Events</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onEventsTap();
}
}, {
xtype: 'button',
ui: 'normal',
width: '50%',
layout: {
pack: 'center'
},
text: '<div align="center"><img width="64px" height="64px" src="resources/images/blocked.png" style="vertical-align: middle"><br /><p class="icon_text">Blocked</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onBlockedTap();
}
}]
}, {
xtype: 'spacer'
}]
}
});
Have a look at the demo here https://fiddle.sencha.com/#fiddle/gu5
I have a tab panel with two tabs.
I wish that both tabs would contain images alongside their text, yet the image on each tab would be shown only when the tab is clicked, otherwise it won't be shown (or replaced).
Can it be done?
You could probably do it by some css trick.For example,try this.
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
id: 'tabPanel',
activeCls: 'activeTabCls',
renderTo: document.body,
items: [{
title: 'Foo',
}, {
title: 'Bar'
}]
});
Your CSS could be something like:
.activeTabCls .x-tab-default-top-active{
background-image: url(http://sencha.com/favicon.icon)!important;
background-position-y: 4px;
background-repeat: no-repeat;
padding: 0px 0px 0px 15px;
}
Note : Not Tested.Some modifications could be needed.