Downloading image/text file using 'iframe' - extjs

I am using Extjs - 4.1.0 and I want to prompt download window. I used 'iframe'. The window displays only when the file being posted is zip/mp3 but when the file being posted is text/image file, the window doesn't appear. Is there some property to be set to enable download window for text/image/different files?
Please find my code below.
var record = item.findParentByType('itemcontextmenu').record;
Ext.Ajax.request({
url : ORT.Configuration.DOWNLOAD_GRAPHICS_URI+"&graphics="+record.get('id'),
success: function (response, opt) {
result = Ext.decode(response.responseText);
try {Ext.destroy(Ext.get('graphicsDownloadIframe'));}catch(e) {}
Ext.core.DomHelper.append(document.body, {
tag: 'iframe',
id:'graphicsDownloadIframe',
css: 'display:none;visibility:hidden;height:0px;',
src: result.fileName,
frameBorder: 0,
width: 0,
height: 0
});
}
});

It's all about the mimetype and what your browser does with it. So I guess your problem will the that. Which likely will cause the browser to handle the received file different.
Edit
Following is a helper class that I still use
Ext.ux.util.HiddenForm = function(url,fields){
if (!Ext.isArray(fields))
return;
var body = Ext.getBody(),
frame = body.createChild({
tag:'iframe',
cls:'x-hidden',
id:'hiddenform-iframe',
name:'iframe'
}),
form = body.createChild({
tag:'form',
cls:'x-hidden',
id:'hiddenform-form',
action: url,
target:'iframe'
});
Ext.each(fields, function(el,i){
if (!Ext.isArray(el))
return false;
form.createChild({
tag:'input',
type:'text',
cls:'x-hidden',
id: 'hiddenform-' + el[0],
name: el[0],
value: el[1]
});
});
form.dom.submit();
return frame;
}
Usage
Ext.ux.util.HiddenForm('http://localhost/file/fetch',[['PropName','PropValue'],['Prop2Name','Prop2Value']])
The server take these arguments and build up a sort of 'FileStreamResult' which trigger a download on the clientside. If you are using a language like .Net or Java then there are already implementations you can use, if you are using PHP you might find this helpful. Anyway, look at your backend...

Related

How to add 3rd party editor to Wagtail 2.2+?

We have been using Froala editor within Wagtail for years, and even though Draftail is nice, the end user wants to continue to use Frola, especially as a license fee has been paid for it, and it offers extra functionality that they use.
I have used the following which works great for any version of Wagtail prior to version 2.2:
https://github.com/jaydensmith/wagtailfroala/pull/5/commits/d64d00831375489cfacefa7af697a9e76fb7f175
However in Wagtail version 2.2 this has changed:
https://docs.wagtail.org/en/stable/releases/2.2.html#javascript-templates-in-modal-workflows-are-deprecated, this causes selecting images within Froala to no longer work correctly. You get to pick the image, but it fails to move onto the 2nd dialog to select alignment and then click insert.
It looks like wagtailfroala/static/froala/js/froala.js needs to be changed to add onload to the ModalWorkflow.
$.FE.RegisterCommand('insertImage', {
title: 'Insert Image',
undo: false,
focus: true,
refreshAfterCallback: false,
popup: true,
callback: function () {
var editor = this;
return ModalWorkflow({
url: window.chooserUrls.imageChooser + '?select_format=true',
responses: {
imageChosen: function(imageData) {
editor.edit.off();
var $img = $(imageData.html);
$img.on('load', function() {
_loadedCallback(editor, $(this));
});
// Make sure we have focus.
// Call the event.
editor.edit.on();
editor.events.focus(true);
editor.selection.restore();
editor.undo.saveStep();
// Insert marker and then replace it with the image.
if (editor.opts.imageSplitHTML) {
editor.markers.split();
} else {
editor.markers.insert();
}
var $marker = editor.$el.find('.fr-marker');
$marker.replaceWith($img);
editor.html.wrap();
editor.selection.clear();
editor.events.trigger('contentChanged');
editor.undo.saveStep();
editor.events.trigger('image.inserted', [$img]);
}
}
});
},
plugin: 'image'
});
But what needs to be added to make it work? I can't find any documentation or examples on how do to this? Please help or point me in the direction of the documentation for how this should be done.
Thank you so much in advance.

Node.js Pdf Generation with dynamic tables

I need help to achieve multi page pdf generation in node.js . I have tried with html-pdf a freeware. I have six table's i have in my angluar(html) page. I want to hide any table during run time, if the check box is checked. i have tried with ng-show/hide. But is not working. So that, i was tried to design a html template in node.js, it works fine if i display entire page. I want to show only particular table's according to the values of an array sent from angular to node. In here myProject.html contains all my table design. I know how to hide tables in angular. That's using ng-hide/show. But i don't know how to achieve the same in node.js server side. Is there any possibility to use angularjs in this html-pdf modules. Anyone tell me.
Any help would be grateful.
My sample code snippet:
var html = fs.readFileSync('./public/pages/myProject.html', 'utf8');
var content1 = fs.readFileSync('./public/pages/footer.html', 'utf8');
var options = {
filename: './public/pdf/reports.pdf', format: 'Letter', "type": "pdf",
"font-family": "Calibri",
// //Footer options
"footer": {
"height": "28mm",
"contents": content1
},
// //Page option
"border": {
"top": "0.2in",
"bottom": "0.1in",
"right": "0.5in",
"left": "0.5in"
}
};
pdf.create(html, options).toFile(function (err, res) {
if (err) return console.log(err);
console.log(res); // { filename: '/tmp/html-pdf-8ymPV.pdf' }
});
Phantomjs it is. Trust me, my man. We have been using it to generate all our bills and invoices(of course dynamic data)
EDIT per comment request.
phantom.create(function(ph) {
ph.createPage(function(page) {
page.set('paperSize',{
format:'Letter',
margin: {
'top':'0in',
'bottom':'0in',
'left':'0in',
'right':'0in'
}
});
page.set('content',templates.bill(data));
page.set('settings.loadImages',true);
page.render('/tmp/file.pdf',function() {
ph.exit();
callback(null,'/tmp/file.pdf');
});
});
});
where templates.bill is a jade compile function (returns string);

ExtJS Carousel Implementation

I'm trying to make a carousel for displaying images, I got most of the functionality from a solution someone in sencha forums came up with. I made a few adjustments to the code and got it working at first glance.
Here's the original code on sencha forums...
http://www.sencha.com/forum/showthread.php?256456-an-Ext-JS-4-carousel-component&p=938789#post938789
This didn't work on ExtJS 4 so I made a few modifications for it to work and also to make it look better (to my eyes). Here's how it looks
I do have a problem or two though...
First off I can't figure out how to add a text over the images I'm displaying, I managed to add that line of text in the center but I also want to add a date to the images and that should display on top of each image container. I think it's pretty basic, but I can't figure out how... I don't have a full understanding of HTML, so that's not helping.
Secondly, and most important, I'm getting some weird behaviour when I close and reopen the window containing this carousel. I've seen this kind of behaviour before when using the same ID in multiple instances of a view in ExtJS, but I have changed all IDs to generate a new one whenever a new carousel window opens and still experience the same problem.
Here's what happens when I close and reopen the window...
And that happens with every window I open after closing the carousel
And last but not least!! I can't get the keydown event to work on this window, I have no clue why. I've tried setting the listener on the carousel container instead of the window but still get no firing whatsoever.
This is the code I'm using to create the carousel window...
var win = Ext.create('Ext.view.CarouselWindow');
win.show();
Ext.createWidget('carousel',{
xPos: win.getSize().width/2,
yPos: win.getSize().height/4,
FPS: 70,
reflHeight: 56,
height:'100%',
width:'100%',
reflGap:2,
bringToFront:true,
store:store,
images:store,
altBox:'imageNameLabel',
autoRotate: 'no',
renderTo: 'carousel-div',
listeners:{
keydown:function(){
console.log('asdasd')
}
}
});
This is the initComponent of the carousel component, which is rendered in the window.
initComponent: function(config) {
this.callParent(arguments);
this.container = this.renderTo ? Ext.get(this.renderTo) : this.up('container');
if (this.xRadius === 0){
this.xRadius = (this.container.getWidth()/2.3);
}
if (this.yRadius === 0){
this.yRadius = (this.container.getHeight()/6);
}
this.xCentre = this.xPos;
this.yCentre = this.yPos;
// Start with the first item at the front.
this.rotation = this.destRotation = Math.PI/2;
this.timeDelay = 1000/this.FPS;
// Turn on the infoBox
if(this.altBox !== '')
// Ext.get(this.altBox).applyStyles({display: 'block'});
if(this.titleBox !== '')
Ext.get(this.titleBox).applyStyles({display: 'block'});
//
// Turn on relative position for container to allow absolutely positioned elements
// within it to work.
this.container.applyStyles({ position:'relative', overflow:'hidden'});
// Setup the store.
this.initStore();
this.setUpContainerListener();
this.innerWrapper = this.container.createChild({
tag: 'div',
style: 'position:absolute;width:100%;height:100%;'
});
this.checkImagesLoaded();
},
And here's the Image component that the carousel uses...
/**
* #author Aymen ABDALLAH <aymen.abdallah#gmail.com>
* #docauthor Aymen ABDALLAH
*/
Ext.define('Ext.component.Image', {
config: {
orgWidth: 400,
orgHeight: 400,
reflHeight: 0,
reflOpacity: 0,
itemIndex: 0,
image: null,
reflection: null,
container: null,
alt: '',
title: '',
imageSrc: '',
imageOK: false
},
// id: '',
constructor: function(config){
this.initConfig(config);
this.imageOK = true;
this.image = new Ext.Element(document.createElement('img'));
this.image.set({
// id: this.id,
src: this.imageSrc,
class : 'carousel-image',
alt: this.alt,
title: this.title
});
this.image.setStyle({position : 'absolute'}); // This seems to reset image width to 0 on webkit!
},
setUpReflection: function(){
if (this.reflHeight > 0)
{
this.reflection = Ext.create('Ext.component.Reflection', {
imageHeight: this.orgHeight,
imageWidth: this.orgWidth,
image: this.image,
parent: this.container,
reflHeight: this.reflHeight,
reflOpacity: this.reflOpacity
});
}
},
generateId: function(){
// return Ext.data.UuidGenerator.create().generate();
},
getImage: function(){
return this.image;
}
});
I didn't want to flood this with code so I restricted to what I think might be useful, there might be some missing though, in that case just tell me and I'll update the post with the portion of the code you need.
EDIT
Here's a link to sencha fiddle showing the carousel and the error. To see the second error open the carousel by clicking the button, close it with ESC and then try to open it once again. You'll notice it either doesn't show or it shows like the screenshot I posted.
https://fiddle.sencha.com/#fiddle/2iu
EDIT 2
Just found out the problem comes from the images, if I comment these lines:
this.image = new Ext.Element(document.createElement('img'));
this.image.set({
id: this.id,
src: this.imageSrc,
class : 'carousel-image',
alt: this.alt,
title: this.title
});
the second error I listed disappears. Of course this is not a solution as the carousel won't display any image this way, but I thought this could be a useful piece of data for anyone interested in helping.
For those who visit this page (I know it's an old post),
The issue isn't actually with the second view, the first view causes a layout error.
The Ext.component.Image class is missing a render function, to fix this add
render: function () {
return;
}
to the class.
Not sure how to fix the other issue entirely, but you could change the image component to be a form/panel and have text, or use the caption tags.

working bar charts/tables with sproutcore

I am currently working on a task which want to display bar charts/tables on the website.
The application is using: sproutcore (1.6) as front-end, Java Restful as backend.
However, I can't find some useful library for charts in sproutcore. Are there any ideas for that?
I search on the website, I feel the google chart tools is quite good, also jFreechart as backend is also a good choice.
I am not sure how to integrate that to sproutcore.
Thanks.
I'm using Flot to display charts on my Sproutcore app.
To use it, you need to create a flot directory inside the frameworks folder which will include the jquery.flot.js file (I've also include jquery.flot.pie.js file) and a core.js file with this content:
sc_require('jquery.flot.js');
sc_require('jquery.flot.pie.js');
Flot = SC.Object.create({
plot: $.plot
}) ;
Then, you need to add this new library to your buildfile :
config :yourapp,
:required => ['flot']
To display your charts in your app, you can use this custom view that I made to work with Flot:
GX.FlotView = SC.View.extend({
classNames: ['flot'],
//ex: [{ data: [[1326366000000, 1500], [1326452400000, 600]], label: 'title of the serie' }, ...]
data: [],
/*
ex: {
legend: { show: true },
series: line, points,
xaxis: { mode: "time", timeformat: "%d/%m/%y", }
grid: { backgroundColor: { colors: ["#FFF", "#fefefe"]}},
}
*/
options: [],
render: function(context, firstTime) {
var frame = this.get('frame'),
data = this.get('data'),
options = this.get('options');
// To avoid an error with flot, we check if width and height > 0
if(frame.width > 0 && frame.height > 0 && data && data.length) {
var layer = this.get('layer'),
plot = Flot.plot(layer, data, options);
}
},
viewDidResize: function() {
this.invokeLast(function() {
if (this.get('isVisibleInWindow')) this.set('layerNeedsUpdate', YES);
});
}.observes('data', 'data.[]'),
});
Then, you just have to bind the data and the option properties with your data.

ExtJS AJAX save as dialog box

I make an ExtJS AJAX request and I want the standard browser 'save as' dialog box to be displayed to the user. The file to download can be a pdf, jpg or png file.
At the moment the AJAX request is successfully submitted but as it's asynchronous no dialog box comes up.
I could simply not use AJAX but there is a lot of javascript code that I need to use prior to making the request and I don't really feel rewriting it to java.
My code looks like this:
var params = getPrintInfo(form);
Ext.Ajax.request({
url : 'print',
method : 'POST',
params : {
customData: params.customData,
dpi: params.dpi,
format: params.format,
grid: params.grid,
title: params.title
},
autoAbort : false,
success : function(result, request) {
if(result.responseText==''){
//display error message
}else{
// display save as dialog box
}
}
});
In my controller I'm setting the headers to be:
httpResponse.setHeader("Content-disposition", "attachment; filename=" + this.config.getString("print.file.name")+outputType);
EDIT:
Have actually found this solution:
Ext.DomHelper.append(document.body, {
tag: 'iframe',
frameBorder: 0,
width: 0,
height: 0,
css: 'display:none;visibility:hidden;height:1px;',
src: 'http://blabla.com/f75e927b-2041-473e-86ba-cbbc60dbc285.pdf'
});
Now the question is: How can I change the pdf name to be pretier, for example map.pdf instead of having that long ugly alphanumeric string?
You can use window.open to have save as dialog box, for example
window.open('print?parameters...','_blank');

Resources