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.
Related
In the Extjs classic framework we use Ext.form.Panel to initiate a file download. In the Modern framework I have been unable to get Ext.form.Panel to do the same. So how can I perform a simple file download (of a potentially large file) in the Modern framework. I would rather not have to change the server side code.
This is the code we use in Classic
params={};
params.doc_path=rec.get('server_path');
params.doc_link_name=rec.get('name');
var form = Ext.create('Ext.form.Panel', {
standardSubmit: true,
renderTo: Ext.getBody(),
url: '/document/download',
method: 'POST',
timeout: 120
});
// Call the submit to begin the file download.
// Note that neither Success nor Failure are ever called
form.submit({
params: params
});
This is the server side code in our ruby server
def download
# A small helper to download the file passed in doc_path
send_file params["doc_path"], type: 'application/octet-stream', disposition: 'attachment', filename: params["doc_link_name"]
end
If we try that in Modern our server does not receive the correct url. (We get a routing error).
File upload using a form in Modern works just the same as Classic, so why doesn't the file download work the same?
Does anyone have some sample code on how to use Ext.exporter.file to download a file from a server? I have read the docs and just got lost. And in any case when I put in a require for Ext.exporter.file I get a 404 not found error, so that is out of the question.
I just need click and forget so no need to track success or failure.
Thanks to Imagine-breaker for his answer in this post I implemented this function:
downloadURI: function(uri, name) {
var link = document.createElement("a");
if(!name)name="";
link.setAttribute('download', name);
link.href = uri;
document.body.appendChild(link);
link.click();
link.remove();
}
and call it like this
lfg.downloadURI('/document/download?doc_path=' + encodeURIComponent(rec.get('server_path')),rec.get('name'));
Server side code remains exactly as is. I might implement this in our Classic version of the app as well - it seems so much simpler.
I have a grid with remote data (php/mysql/json) and use a form to insert records or to edit this data.
I use the api configuration of the proxy/store. I use MVC architecture.
So, all very simple (in pseudo code):
get selected model form grid or create model
frm.loadRecord()
frm.updateRecord()
frm.getRecord().save()
and all works fine, but I noticed in the browser console that after the POST (works fine, calls either the url configured with create or the url configured with update), the store calls (GET) the url configured with retrieve twice. These calls are identical.
So functionally all works fine and I could ignore it, but now I've noticed I want it fixed.
Can anyone help me where to look? Thanks in advance.
Details:
It's all really basic:
In the controller of the gridpanel:
updateRow: function (gridpanel) {
var sm = gridpanel.getSelectionModel();
var record = sm.getLastSelected();
this.showForm(record);
}
and
showForm: function (record) {
...
formpanel.show();
var frm = formpanel.getForm();
frm.loadRecord(record);
}
In the controller of the formpanel:
submit: function(frm) {
frm.updateRecord();
frm.getRecord().save();
}
When I remove the save action the GET requests aren't called, so this seems to trigger them.
In the store:
api: {
create: '../php/api/customers.php?request=create',
read: '../php/api/customers.php?request=retrieve&scope=summary',
update: '../php/api/customers.php?request=update',
destroy: '../php/api/customers.php?request=delete'
}
The screenshot:
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.
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.
Is there a simple way to export a grid data to XLS in ExtJS.
If not I am trying the following way.
I am trying to read the data store inside a controller. The datastore is already being used by the grid. I want to read the data on a button click and send it to server through AJAX. Later inside server I would retrieve the data and write to XLS. In this case what is the way I can read the data inside the controller?
enter code here
Ext.define("MyApp.controller.GridController", {
extend : 'Ext.app.Controller',
views: ['performance.grid.PerformanceGrid'],
models: ['GridModel'],
stores: ['GridStore'],
refs : [{
ref : 'mainTabPanel',
selector : 'portal > tabpanel'
}],
init : function() {
this.control({
'portal toolbar > button[itemId=xls]' : {
click : this.onAddTab
},
'portal toolbar > button[itemId=pdf]' : {
click : this.onAddPortlet
}
});
},
onAddTab : function(btn, e) {
// I want to read the datastore here and make an AJAX call
},
});
onAddTab: function(btn, e){
var store = // get the store reference probably doing Ext.getStore('the store');
var records = store.data.items.map(function(r){ return r.data });
// send it all to your server as you want to
// Ext.ajax.Request({
// url: 'the url',
// data: records,
// method: 'POST'
// });
});
I didn´t test it but it have to work.
Good luck!
I think that process is not the best because you will have 3 payloads (data round trips that doesn't make any sense)
Your call your server method to get the data that will be populated into the grid.
The JSON object (containing the server data) will then travel again to the server
(THIS DOESN'T MAKE SENSE TO ME... WHY YOU WANT TO SEND DATA TO SERVER WHEN THE SERVER WAS THE SOURCE?? )
The server will process your object from JSON response and then create the document on the fly and send it back to server.
What I think you should do is the following:
Get data from server and bind your grid.
Get your store proxy URL and parse the method and extraParams so you know who served the grid and what you asked to the server.
Create a common method on server that receives a method and an array of parameters. Then inside this method make the logic so depending on the method, you call your data Repository (same repository where your first request got the data), process the document and send the file back to server.
This way you should have something like this:
webmethod(string method, object[] params) {
switch(method){
case "GetTestGridData":
// here you call your Repository in order to get the same data
GeneralRepo repo = new GeneralRepo();
var data = repo.GetTestGridData(object[0],object[1]);
break;
}
byte[] fileStream = Reports.Common.Generate(data, ExportType.PDF);
// response the stream to client...
}