I have my ExtJS 4.2.1 Application, where I have a reports section for generating and downloading PDF reports.
Right now in my controller I have this for downloading a file:
onPrint: function() {
Ext.core.DomHelper.append(document.body, {
tag: 'iframe',
id: 'downloadIframe',
frameBorder: 0,
width: 0,
height: 0,
css: 'display:none;visibility:hidden;height:0px;',
src: '/api/report/GenerateReport'
});
}
Is working fine, but there are reports that take 5 to 10 seconds to generate, so the user might click several times the Print button because he doesn't know that a file it's being generated.
How can I show a mask "processing download" or something so I block the UI until the file is downloaded.
Thanks.
The parent panel that contains the Print button should have the attribute
waitMsgTarget: true,
and on the button's handler function, before you call onPrint(), add the line:
waitMsg: 'Processing download...',
Hope it helps.
The solution that I ended with is the following:
A. Call using Ajax a server method that will generate the file but will be stored temporarily on the server. Here I show a wait message
the name of the file is a Guid.
B. Once the file is created on server I responde the client with a the file name.
C. The client on success response creates an IFrame that it's src property points to the just created file URL.
D. The file is downloaded.
Related
Scenario: the user picks a few choices, downloads a PDF. The user then changes a few choices, and downloads a new PDF.
Problem: everything works on the first run, but attempting to download a second PDF gives the user the same, old PDF.
Is there some way to "clear" or "kill" the old PDF? I tried setting the var doc to null before running the function again, and that didn't help. Somehow the first PDF being generated is all I'm able to serve.
Here is the code that makes the PDF. Those frontImg and backImg vars contain the dataURI.
$(".button").click(function(){
var doc = new jsPDF('landscape');
doc.addImage(frontImg, 'PNG', 0, 0, 300, 210);
doc.addPage('a6','l');
doc.addImage(backImg, 'PNG', 0, 0, 300, 210);
doc.save('file.pdf');
});
Anyone have any ideas here? Once the user takes actions that update the frontImg and backImg vars, shouldn't the PDF update too?
I am using ng-flow in my application and it works pretty well. Currently, the destination directory for the files being uploaded is set in my web.config and used within my webapi controller method.
What I want to do is allow the user to specify the destination, rather than it come from config. However, looking at the docs, I don't see an option that I can add to the below appconfig for this:
function appConfig(flowFactoryProvider) {
flowFactoryProvider.defaults = {
target: 'api/upload',
permanentErrors: [404, 500, 501],
maxChunkRetries: 1,
chunkRetryInterval: 5000,
simultaneousUploads: 4
};
flowFactoryProvider.on('catchAll', function (event) {
console.log('catchAll', arguments);
});
}
Am i missing something or do I need to handle this myself?
You should see a clear separation between your front end and you back end. That is why you are not able to set in flow-js or any other framework.
What you can do, is let the user specify it in a form field and leave the handling to the server side. This way it is also possible to filter on allowed locations. You don't want your client to add files to your system directories.
I need to display the server log file into the screen using ajax call. The panel need to render every 10 seconds to get updated log file. I tried with following code.
var LogPanel = Ext.extend(Ext.Panel, {
title : 'API LOG',
width : '100%',
height:265,
autoScroll: true,
listeners: {
'render': function()
{
Ext.Ajax.request({
url: 'logs/mylog.log',
success: function(response){
Ext.getCmp('logPanelId').update( response.responseText );
}
});
}
}
});
Ext.reg('logPanel', LogPanel);
I cannot get properly aligned log data in the panel as available in the log file
My log contains xml codes. but xml codes not displayed in the panel.
one of my xml tag name is "input". but In the panel Html textfield was
created.
guide me to solve these issues.
Try this:
var s = Ext.util.Format.htmlEncode(s);
Ext.getCmp('logPanelId').update('<pre>' + s + '</pre>');
Couple of things :
1) read response as responseXML. Something like Ext.getCmp('logPanelId').update( response.responseXML );
2) This enables a formatted xml . If your log file is bound a xml schema (which normally it is) , you should take a look at XmlReader. This will help you avoid the encoding and decoding overhead at the client side.
I am working on extjs 4.2 application. Trying to create a menu toolbar where I can add and delete files. For example:
When I press Open, I want to see the file browser window. And when I finish choosing the file and click "open", I will see something like this:
I know that I need to use onItemClick() function to open the browser. But I have no idea how to call that window. Also how can you program so only certain file extensions can be chosen.
I am guessing that once you press "open" on the file browser window, the file tree in the left panel will dynamically add that file. But have no idea how can I connect "open" to my tree.
Just to clarify - this is going to be user based app, it is not going to be a webapp. This will be opened in user's browser and that is it. No need to get some info from server or send something to client.
EDIT: I have been able to solve the part where you click on Open the file browser dialog pops up. Then when I select a file and press "open", it displays a message box with file's name.
Here is the code for that part:
var item = Ext.create('Ext.form.field.File', {
buttonOnly: true,
buttonText: 'Open',
hideLabel: true,
listeners: {
'change': function(fb, v){
Ext.Msg.alert('Status', v);
}
}
});
var mainmenu = Ext.create('Ext.menu.Menu', {
width: 200,
margin: '0 0 10 0',
items: [item]
});
Now the problem is that I need to get the FULL PATH of the file. This message only shows file's name. Any help?
Using files on the web can be tricky, so you're going to have to be patient, diligent, and be prepared for some self-learning.
A. If you want to be compatible with all browsers, you need to upload the file to a server, and have the server return info about the file. Or you can try Sencha Desktop Packager, flash, or signed Java Applets.
If you are okay with only modern browsers, you will need to read and learn the HTML5 File API. Here's a start:
https://developer.mozilla.org/en-US/docs/Web/API/FileReader?redirectlocale=en-US&redirectslug=DOM%2FFileReader
B. Start with a filefield button for now, and add it as a menuitem later, just to keep things simple. You will want to listen to the filefield's change event if you want to read the file.
C. To restrict file types (only modern browsers allow this), you'll need to do something like this (audio/* is just an example):
{
xtype:'filefield',
listeners:{
afterrender:function(cmp){
cmp.fileInputEl.set({
accept:'audio/*'
});
}
}
}
D. After you get the file, you will want to add it's info to the tree's TreeStore.
I download fine uploader 3.5, created http handler for a file upload function in my little website . the website is done by asp.net ajax and jquery. it runs at IE9. every time I upload a file, there is a list of file names shown below the load button. if I don't want thme, what should I do?
my code is like this:
html: ...
'<tr><td><div id="jquery-wrapped-fine-uploader"></div></td></tr>...
'ajax/jquery:...
'$('#jquery-wrapped-fine-uploader').fineUploader({
'request: { endpoint: 'xxx.ashx' }
'})
'$('#jquery-wrapped-fine-uploader').on("complete",
'function (event, id, fileName, responseJSON) {
' alert("UPLOAD SUCCESS");
' $.ajax({some ajax calls here});
' })
// WHERE TO PUT this TO CLEAR the UPLOADED FILE LIST??? $('#jquery-wrapped-fine-uploader').fineUploader('reset');
XXX.ashx:
'... public void ProcessRequest (HttpContext context) {
'do some http request work..
'context.Response.ContentType = "text/plain";
'context.Response.Write("{\"success\":true}");
'}
My question is:
I want to completely remove the uploaded file list which shows automatically in green color ( or red if they fail), in order to clear them, I tried to put: $('#jquery-wrapped-fine-uploader').fineUploader('reset'); right after .on('complete'), it's not working, also #jquery-wrapped-fine-uploader seems cached all the time. please help on this.
If you don't want to see the file list at all, you should be using FineUploaderBasic mode instead of using FineUploader mode and then removing all elements in the pre-built UI. FineUploaderBasic mode gives you access to the API, options, and callbacks, but assumes you will be creating your own UI. In other words, FineUploaderBasic mode does not create any DOM elements (except the opaque file input element as a child of your button container, if you supply one). This is all explained (in a great amount of detail) in the documentation.
Start here: http://docs.fineuploader.com