How to listen for layer loading failure - openlayers-6

I saw the official error event, but I don't know how to use it; When I am in addlayer, the layer loading fails and the page is blank. I want to listen for error events. How do you use it?
The URL of source is incorrect and inaccessible.
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON(),
projection: 'EPSG:4326',
url: url,
strategy: ol.loadingstrategy.bbox
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: rgbList[0]
}),
stroke: new ol.style.Stroke({
color: 'black',
width: 1
})
})
})
map.addLayer(vector);
My page is blank and addlayer reports an error:Uncaught TypeError: Cannot read properties of undefined (reading 'ol_uid').

If it is a data loading problem you can listen for these errors on the source of the layer. Depending on the source type the event is called featuresloaderror, tileloaderror, or imageloaderror.
Without some actual code it's hard to help you further.

Related

Adjusting Context when using rallystandardreport

I'm utilizing the rally standard report to generate an iteration burndown, but given that i want post this on a wiki/web page. Looking for a way to point this to a project/subproject so that I can have several instances of this on one page. I tried it via context, but I'm obviously missing something. The code is below, any guidance/recommendation would be greatly appreciated!
Thanks!
Mark
Ext.create('Ext.Container', {
context : {
workspace : 'https://rally1.rallydev.com/slm/webservice/v2.0/workspace/50876644101',
project : 'https://rally1.rallydev.com/slm/webservice/v2.0/project/50891172431'
},
items: [{
xtype: 'rallystandardreport',
width: 750,
height: 500,
reportConfig: {
report: 'IterationBurndown',
subchart: 'hide',
title : 'IterationBurndown',
project : 'Harrier'
}
}],
renderTo: Ext.getBody().dom
});
You're on the right track. The StandardReport component was one of the earliest ones written and so it doesn't quite follow the standard ability to pass in a context like most of the rest of the SDK.
You're on the right path with the project config above- it just needs to be the ref of the project you're targeting rather than the name, and it goes right on the root component config instead of beneath reportConfig. There are also projectScopeUp and projectScopeDown.
There's also a full example here: https://help.rallydev.com/apps/2.0/doc/#!/example/standard-report
{
xtype: 'rallystandardreport',
width: 750,
height: 500,
reportConfig: {
report: 'IterationBurndown',
subchart: 'hide',
title : 'IterationBurndown'
},
project: '/project/12345',
projectScopeUp: false,
projectScopeDown: true
}

extjs Dynamically load nodes on scroll down

I am new to Ext Js 4.1, I have 5000 child nodes and need to load only 50 nodes on load,after scrolling down have to load another 50 nodes and continues. I am trying from past 2 days with different scenarios, but I didn't find anything related, can anu one please help me how to do, if possible with sample code.
Thanks in Advance
The only way to do this with a server that gives you your's 5000 child nodes is to use a buffered store.
Using a buffered store you can set your page dimensions and scrolling down changing the page you will be able to load your datas 50 by 50 records.
check all you need here http://docs.sencha.com/extjs/5.1/5.1.2-apidocs/#!/api/Ext.data.BufferedStore
buffered store disponible also on ext 4.1
also some examples on sencha examples
you can watch this
http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/infinite-scroll.html
Finally i find the solution that we need to use 'bufferedrenderer' Plugin.Infinite grid uses a buffered store, and is not supported for trees.
Here is the sample code
Ext.onReady(function () {
var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'http://localhost/codig/index.php/user/jsonusers',
extraParams:limitValue
}
});
store.reload();
var treePanel = Ext.create('Ext.tree.Panel', {
id:'mytree',
title: 'Infinite nodes tree',
width: 200,
height: 400,
store: store,
rootVisible: false,
plugins: {
ptype: 'bufferedrenderer'
},
renderTo: Ext.getBody()
});
});

Sencha Architect (touch) - Use camera photos

I have implemented my sencha architect project with a possibility to do a photo (with phonegap). After taking a photo, I need to see the photo directly into another container with other information (the picture will be smaller than the original...and there will be written above and below).
How do I open the new container and display the image in a smaller size?
please help me, I don't understand how can I manage the photo
Now I use this code but if you have something better....
var me = this;
Ext.device.Camera.capture({
success: function(image) {
me.add({
xtype:'image', // Commento
src: image
});
},
source: 'camera',
cameraDirection: navigator.camera.Direction.FRONT,
destination: 'file'bu
});
thank you
Carlo
Sencha documentation got an example for it. See http://docs.sencha.com/touch/2.3.1/#!/api/Ext.device.Camera
Ext.device.Camera.capture({
success: function(image) {
imageView.setSrc(image);
},
quality: 75,
width: 200,
height: 200,
destination: 'data'
});
You can also use
destination: 'url'
in that case the image argument of the callback function will be a file URL what you can use in a container template as the source of the html image.

File upload with extjs4

i am working on Extjs4 file upload control. i have view with file upload control as-
Ext.define('Balaee.view.kp.dnycontent.Content',
{
extend:'Ext.form.Panel',
requires:[
'Balaee.view.kp.dnycontent.ContentView'
],
id:'ContentId',
alias:'widget.Content',
enctype : 'multipart/form-data',
title:'This day in a history',
items:[
{
xtype: 'fileuploadfield',
hideLabel: true,
emptyText: 'Select a file to upload...',
//inputType: 'file',
id: 'upfile',
width: 220
}],
buttons: [{
xtype : 'button',
fieldlabel:'upload',
action:'upload',
name:'upload',
text: 'Upload',
formBind:'true'
}]
});
And corresponding action in controller is-
getUpload : function() {
var file10 = Ext.getCmp('ContentId').getEl().down('input[type=file]').dom.files[0];
var reader = new FileReader();
reader.onload = function(oFREvent) {
fileobj=oFREvent.target.result;
console.log(oFREvent.target.result);
};
}
});
So above controller's function is retriving uploaded file and displaying it in encoded format inside reader's onload function. i.e. "console.log(oFREvent.target.result);" line is displaying uploaded file's data in encoded format in console. I need to send this file to server side. So i am passing above fileobj as parameter to store as-
var storeObj=this.getStore('kp.DnycontentStore');
storeObj.load({
params:{
data:fileobj
},
callback: function(records,operation,success){
console.log("send");
},
scope:this
})
But its showing fileobj as undefined outside reader.onload function. So how to send this file along with its contents to server side? Is there any other way to get uploaded file in controller and send it to server. Please can someone guide me.
I dont know how to handle fileuplaod on php side, but the return response from the server needs to be text/html encoded
See the docs on this:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Basic-method-hasUpload
also example PHP fileupload script:
http://www.w3schools.com/php/php_file_upload.asp

How to take a photo using Camera in Sencha App?

I am trying to take a picture using camera in Sencha Touch 2. Here i have one button 'Take a Picture', when i will press it, camera should start. As i am new to this sencha touch 2, i am unable to figure it out, how to do this?
For this i used the below code:
Sencha Fiddle Link
Please help me. I do not want to use Phone gap.
You have to add device folder of Sencha Library in root directory
and add below code in
Ext.require('Ext.device.Camera');
and use this code for capture image using camera
Ext.device.Camera.capture({
success: function(image) {
imageView.setSrc(image);
},
quality: 75,
width: 200,
height: 200,
destination: 'data'
});
If you want to use purely sencha, then you can check this code:
xtype: 'button',
handler: function(button, event) {
Ext.device.Camera.capture({
source: 'camera',
destination: 'data',
success: function(imagedata) {
var img = Ext.getCmp('theimage');
img.setSrc('data:image/jpeg;base64,' +imagedata);
},
failure: function() {
Ext.Msg.alert('Error', 'There was an error when acquiring the picture.');
},
scope: this
});
But if you want to use phonegap camera features, may be you have to change the code. As sencha is giving the default feature to handle the camera, i wish not to go with phonegap. Hope it will help..