I am trying to run an ExtJS4 Ext.application inside our existing website template. We have a div #content, into which I want to place the application for development. How do I render the application into this area, rather than replacing the existing html page?
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
// renderTo: Ext.Element.get('#content') doesn't work
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});
You need to use other container than a Ext.container.Viewport. By definfiton Ext.container.Viewport will always take the entire browser window.
From documentation:
The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page.
Just use Ext.panel.Panel instead
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.panel.Panel', {
layout: 'fit',
renderTo: Ext.get('content')
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});
Related
I am using html2pdf.js with Angular 4 to generate a PDF since the HTML file. It works, but there is an issue: when it renders the HTML in PDF borders don't appear.
This is the result in the PDF:
And this is how my HTML file looks at browser:
This is how I used html2pdf:
GeneratePDF () {
var element = document.getElementsByClassName('panel-body')[1];
html2pdf(element, {
margin: 1.5,
filename: 'myfile.pdf',
//image: { type: 'png' },
html2canvas: { dpi: 192, letterRendering: true},
jsPDF: { unit: 'cm', format: 'a4', orientation: 'p' }
});
}
I just want to show the border of the tables and the textareas.
Documentation of html2pdf is here: https://github.com/eKoopmans/html2pdf
I'm using tiny mce and want in the insert image dialog a button to a special page
just behind the source input a simple link to a different page that opens in a new browser window. how can I achieve that?
TinyMCE has an init options called file_browser_callback and file_picker_callback that allow you to add your own file browsing functionality to the insert dialogs:
https://www.tinymce.com/docs/configure/file-image-upload/#file_browser_callback
https://www.tinymce.com/docs/configure/file-image-upload/#file_picker_callback
https://www.tinymce.com/docs/configure/file-image-upload/
So for example, you could do the following in your init:
tinymce.init({
file_picker_callback: function(callback, value, meta) {
imageFilePicker(callback, value, meta);
}
});
Then the imageFilePicker function would just call out to a function that does the real work of opening a window to do the selection:
var imageFilePicker = function (callback, value, meta) {
tinymce.activeEditor.windowManager.open({
title: 'File and Image Picker',
url: '/myapp/getfilesandimages',
width: 700,
height: 600,
buttons: [{
text: 'Insert',
onclick: function () {
//do some work to select an item and insert it into TinyMCE
tinymce.activeEditor.windowManager.close();
}
},
{
text: 'Close',
onclick: 'close'
}],
},
{
oninsert: function (url) {
callback(url);
}
});
};
Eighter create your own plugin using a copy of the tinymce core plugin OR add it to the DOM after the dialogue has been created.
I have a few problems with displaying angular material elements and C3.js charts.
With new version of the angular material, in widgets appeared scroll bar.
Does anybody knows how to disable it? I want to show widgets with their fixed size.
Please take a look at the plunker.
The second problem is connected with C3 graphs.
After I open app in browser (at the plunker is also the case) and open the dialog the charts is displaying. Then I close the dialog and open again, the charts are broken.
What could be the cause of this problem? I use a lot of libraries in my project (ngAnimate, ngAria, ngCookies, ngResource, ngTouch, ui.router, ngMaterial,ngMdIcons,ui.grid,ui.grid.selection,ui.grid.cellNav,ui.grid.pagination,ui.grid.resizeColumns, leaflet-directive, bootstrap, jQuery, c3, d3). Do I need to take attention to the order that they are included?
Here is the controller for C3 chart (data come from external source - DB):
angular.module('app')
.controller('ChartCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
$scope.param = $stateParams.param_1;
d3.json('/chart1/'+$stateParams.param_1, function(err, data){
if(err){ throw err; }
$scope.data = data;
//console.log(data);
$scope.$apply();
$scope.chart = c3.generate({
bindto: '#chart1',
/*size: {
height: 350
},*/
data: {
json: $scope.data,
//columns: $scope.data,
keys: {
value: ['data1', 'data2'],
},
type: 'bar'
},
bar: {
width: {
ratio: 0.4 // this makes bar width 50% of length between ticks
}
},
grid: {
x: {
show: true
},
y: {
show: true
}
}
});
});
}]);
And the html template which is included in panel-widget directive:
<div id="chart1" ng-controller="ChartCtrl">
<div id="chart1"></div>
</div>
You can do something like this to fix the size of the graph displayed in tab 1.
In side Tab1, make an SVG with fixed size and height like below:
<div id="tab1" ng-controller="GraphCtrl">
<svg id="chart1" width="100" height="100"></svg>
</div>
Bind the SVG to the graph like this:
$scope.chart_grid_lines = c3.generate({
bindto: d3.select('#chart1'), //binding to svg
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
type: 'spline'
},
legend: {
show: false
}
});
Working code here
Hope this helps!
I am developing a drilled down chart using HichartJS, the chart is getting generated but drill down is not functioning properly.
I need the back button as well so that user can go back to the previous data.
Here is my code,
HTML:
<div ng-controller="myctrl">
<highchart id="chart1" config="highchartsNG"></highchart>
</div>
JS:
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function ($scope) {
$scope.highchartsNG = {
options: {
chart: {
type: 'column'
}
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{"data":[{"name":"Hiring","y":390309.25,"drilldown":"PRIME MOVER"},{"name":"Private","y":406746.97,"drilldown":"PRIME MOVER"}],"name":"series1","color":"","type":"area"}],
drilldown: {
series: [{"id":"Hiring","data":[["MOTOR CAR",97610],["VAN",129750],["THREE WHEELER",62949.25],["PRIME MOVER",100000]]},{"id":"Private","data":[["MOTOR CAR",488356.97],["VAN",129750],["THREE WHEELER",78949.25],["PRIME MOVER",100000]]}]
}
}
});
Here is the Plunker
Update2 I have made changes for your data , The problem was in formatting of json and the second problem was you were not calling proper id in drillDown. Check the fiddle updated Here with your data
Update1 I have made changes and now its working on fiddle Here . I have added changes to highcharts-ng in script tag in html section of fiddle. Also I changed the data, because your data was not formatted for me.
I just realize that drillDown feature isn't supported by highcharts-ng .see the link Highcharts-ng with drilldown
Following edit was done at source code to make it work.
if(config.drilldown) {
mergedOptions.drilldown = config.drilldown;
};
I am using the following code to display my current location on Sencha Touch 2. Its showing the correct latitude in console.log() but not showing the map. Please help.
Ext.define('restApp.view.GreetingView', {
extend: 'Ext.Map',
alias: 'widget.mymap',
config: {
fullscreen: true,
//tpl: '<p>The ID is {uuid}</p><p>The content is {display}</p>',
layout: {
type: 'fit'
}
},
initialize:function(){
Ext.Viewport.add({
xtype: 'map',
id:'geomap',
itemId:'ma'
});
var geo = Ext.create('Ext.util.Geolocation', {
autoUpdate: true,
frequency: '10000',
listeners: {
locationupdate: function (geo) {
var center = new google.maps.LatLng(geo.getLatitude(), geo.getLongitude());
Ext.getCmp('geomap').setData(center);
//restApp.view.GreetingView.getComponent('ma').update(center);
var marker = new google.maps.Marker({
position: center,
map: Ext.getCmp('geomap').map
});
console.log('New latitude: '+ geo.getLatitude());
},
locationerror: function (geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
if (bTimeout) {
alert('Timeout occurred.');
}
else {
alert('Error occurred.');
}
}
}
});
}
});
OLD ANSWER
Comparing it to a snippet I use for the same purpose (shown below), I realised the issue is a simple one. "center" is a reserved word. Try using a different variable name.
PART OF EDIT: removal of code snippets.
NEW ANSWER
I looked around and noticed your "project" is but a piecemeal collection of demo code.
Here's a complete code solution, with all excess pieces removed for simplicity, as well as over use of variables, also expanded to a longwinded format to be obvious.
/*
The application, including a simple launcher.
*/
Ext.application({
requires : ['Ext.device.Geolocation'],
views : ['MainView'],
controllers : ['Maps'],
name : 'Geo',
launch: function() {
Ext.create('Geo.view.MainView', {fullscreen: true});
}
});
/*
The View to display the map, as well as how to include the navigation bar
and include a "you are here" button.
*/
Ext.define('Geo.view.MainView', {
extend: 'Ext.navigation.View',
alias: 'widget.mainview',
requires: [
'Ext.Panel',
'Ext.Map',
'Ext.navigation.Bar',
'Ext.Button'
],
config: {
items: [
{
xtype : 'panel',
title : 'Map',
itemId : 'mapPanel',
items : [
{
xtype: 'map',
height: '100%',
itemId: 'map'
}
]
}
],
navigationBar: {
docked: 'top',
items: [
{
xtype: 'button',
itemId: 'youAreHereButton',
text: 'You Are Here'
}
]
}
}
});
/*
The Controller with functionality for the "you are here" button tap
*/
Ext.define('Geo.controller.Maps', {
extend: 'Ext.app.Controller',
config: {
refs: {
mapView: {
selector: 'mainview #map',
xtype: 'Ext.Map'
},
mainView: {
selector: 'mainview',
xtype: 'Ext.navigation.View'
}
},
control: {
"mainview #youAreHereButton": {
tap: 'onYouAreHereTap'
}
}
},
onYouAreHereTap: function(button, e, eOpts) {
// set 'mapView' as the parent view displaying the map
var mapView = this.getMapView();
// control measure for old browsers or denied permission for location detection.
if (Ext.feature.has.Geolocation) {
/*
Ext.device.Geolocation uses native (phone) Geolocation capabilities if available,
and falls back to Ext.util.Geolocation if only browser support detected.
*/
Ext.device.Geolocation.getCurrentPosition({
allowHighAccuracy : true,
maximumAge : 0,
timeout : 20000,
success : function(position) {
var latitude = position.coords.latitude,
longitude = position.coords.longitude,
location = new google.maps.LatLng(latitude, longitude),
marker = new google.maps.Marker({
position : location,
map : mapView.getMap(),
animation : google.maps.Animation.DROP
});
mapView.setMapOptions({ // Move to the center
center: location
});
},
failure: function() {
console.log('something went wrong!');
}
});
}
}
});
Yes, I could have simplified it further down to a single view, containing also the controller's handler for the "you are here" tap. I have chosen to present it this way to assist you with understanding the MVC pattern and how it applies in Sencha Touch.
For this to work, it'll require the Sencha Touch library, as well as this following line:
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
This is the script which includes Google Maps in your page and is essential for displaying.
Learn more:
https://www.sencha.com/learn/hello-world/ - getting started
http://docs.sencha.com/touch/2.3.1/#!/guide - complete documentation for how to do anything in Sencha Touch, starting with the Guides page.