Very low-level file upload:
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'form',
items: [{
xtype: 'filefield',
fieldLabel: 'Select file',
listeners: {
change: {
fn: me.onFilefieldChange,
scope: me
}
}
}]
},{
...
onFilefieldChange: function(filefield, value, eOpts) {
var form = filefield.up('form').getForm();
form.submit({
url: APIURI+'FileUpload',
headers: {'Accept':'application/json','Content-Type':'application/json'},
waitMsg: 'Uploading',
success: function(fp, o) {
var filedata = Ext.decode(o.response.responseText).data;
var rec = Ext.create("MyApp.model.FileModel",filedata);
Ext.getStore("FileStore").add(rec);
},
failure: function(fp, o) {
Ext.alert("ERROR", "File save failed"));
}
});
The first file upload works like a charm; the file is packed into the multipart/mime and submitted correctly.
The second file upload from the very same file upload field fails, because the file is not packed into the mime.
If I close the window and open it again, the file field is working again - for a single upload, that is.
The difference in DOM of the file input field tells us why the browser behaves like this. The following three attributes are magically missing from the <input type="file" field after the first file upload:
data-ref="fileInputEl"
name="filefield-1333-button"
data-componentid="filefield-1333-button"
Now, this does not happen if I use the file upload field in the sencha docs. It doesn't happen with my code in ExtJS 4.2.2. But it does happen with ExtJS 6.0.1.
You wouldn't know why, would you?
It is a bug in Sencha ExtJS 6 Framework. Everything works as expected if you provide a name property to the file upload field.
xtype: 'filefield',
fieldLabel: 'Select file',
name: 'RequiredSenchaBugWorkaround',
...
Adding a name doesn't always work. It still has issues in Ext 6.2. In addition to that you should do
FileInputField1.reset();
This makes sure that the field is reset and lets you upload the same file again.
Related
I'm working with this bootstrap library and actually everything works fine. The question is, Can bootstrap-table generate header automatically in depend of JSON file? I've tried to find any information about that, but unlucky. Now my header is generated from script like from this example:
function initTable() {
$table.bootstrapTable({
height: getHeight(),
columns: [{
field: 'field1',
title: 'title1',
sortable: true
}, {
field: 'field2',
title: 'title2',
sortable: true
}, {
field: 'field3',
title: 'title3',
sortable: true
}, {
field: 'Actions',
title: 'Item Operate',
align: 'center',
events: operateEvents,
formatter: operateFormatter
}
],
formatNoMatches: function () {
return "This table is empty...";
}
});
Does anyone how to generate header automatically?
Populating from a flat json file is definetly possible but harder than from a seperate (slimmer and preped) data request, because title and other attributes 'might' have to be guessed at.
Ill show basic approach, then tell you how to make it work if stuck with a flat file that you CAN or CANT affect the format of (important point, see notes at end).
Make a seperate ajax requests that populates var colArray = [], or passes direct inside done callback.
For example, in callback (.done(),.success(), ect) also calls to the function that contains the js init code for the table.
You might make it look something like this:
function initTable(cols) {
cols.push({
field: 'Actions',
title: 'Item Operate',
align: 'center',
events: operateEvents,
formatter: operateFormatter
});
$("#table").bootstrapTable({
height: getHeight(),
columns: cols,
formatNoMatches: function () {
return "This table is empty...";
}
});
}
$(document).ready(function(){
$.ajax({
method: "POST",
url: "data/getColumns",
// data: { context: "getColumns" }
datatype: "json"
})
.done(function( data ) {
console.log( "getCols data: ", data );
// Prep column data, depending on what detail you sent back
$.each(data,function(ind,val){
data.sortable = true;
});
initTable(data);
});
});
Now, if you are in fact stuck with a flat file, point the ajax towards that then realise the question is whether you can edit the contents.
If yes, then add a columns array into it with whatever base data (title, fieldname, ect) that you need to help build your columns array. Then use responseHandler if needed to strip that columns array if it causes issues when loading into table.
http://bootstrap-table.wenzhixin.net.cn/documentation/#table-options
http://issues.wenzhixin.net.cn/bootstrap-table/ (click 'see source').
If no, you cant edit contents, and only have the fieldname, then look at using that in the .done() handler with whatever string operation (str_replace(), ect) that you need to make it look the way you want.
The upload tab of image2 plugin looks like this -
{
id: 'Upload',
hidden: false,
filebrowser: 'uploadButton',
label: lang.uploadTab,
elements: [
{
type: 'file',
id: 'upload',
label: lang.btnUpload,
style: 'height:40px',
onChange: function(evt){
alert('file uploaded');
}
},
{
type: 'fileButton',
id: 'uploadButton',
filebrowser: 'info:src',
label: lang.btnUpload,
'for': [ 'Upload', 'upload' ]
}
]
}
Here in the 'tab' details there is filebrowser field which is equal to 'uploadButton' and filebrowser field is also in UI element object where it is equal to 'info:src'.
I am not implementing Browse Server functionality, only upload functionality. I have implemented it but I want to understand how filebrowser plugin and filebrowser fields are facilitating it?
Can anyone here explain here a little bit in detail as CKEditor documentation does not tell much?
The ck_config.js file has settings which determine the URL of the file browser for various purposes:
config.filebrowserBrowseUrl = '';
config.filebrowserImageBrowseUrl = '';
config.filebrowserFlashBrowseUrl = '';
config.filebrowserUploadUrl = '';
config.filebrowserImageUploadUrl = '';
config.filebrowserFlashUploadUrl = '';
Basically this will be a webpage which appears in a roughly 600px-wide popup.
One of the GET parameters of this URL (automatically added) will be CKEditorFuncNum which determines the callback function for sending the results back to CK.
On selection of a file/path, you would typically do:
window.opener.CKEDITOR.tools.callFunction(ck_callback,pathrel2page);
where ck_callback is the CKEditorFuncNum value and pathrel2page is the selected file.
HTH.
I have a filefield in my extjs page. The upload functionality is working fine, alright.
The filefield is placed in a widget window. When the window is closed and reopened the filefield doesn't create properly. The browse button is missing in it. This happens only when I close the window without uploading anything at all.
The below is the code for the same:
var stockAuditUploadFile = Ext.widget('window', {
title: 'Upload the Stock Audit file',
closeAction: 'hide',
width: 500,
autoHeight: true,
layout: 'fit',
resizable: false,
modal: true,
items: [{
xtype: 'filefield',
id: 'filedata',
emptyText: 'Select a document to upload...',
fieldLabel: 'File',
waitMsg: 'Please wait...',
buttonText: 'Browse',
validator: function (v) {
if (!/\.xls$/.test(v)) {
return 'Only Excel files allowed';
}
return true;
}
}],
buttons: [{
text: 'Upload',
handler: function () {
//callUpload();
if (myuploadform.getForm().isValid()) {
//alert('in456side');
form_action = 1;
myuploadform.getForm().submit({
url: 'submission/stockupload.jsp',
success: function (result, action) {
}
});
}
Ext.Msg.alert('File Uploaded Successfully');
stockAuditUploadFile.destroy();
}
}]
});
stockAuditUploadFile.show();
When the widget window opens for the first time, everything works fine including the validation for excel file uploading but on close and reopen the browse button is missing.
Is there any mistake in my code?
I found the solution to the above issue.
The closeAction: 'hide' was the problem. On hide, things in Extjs go wild, haven't understood that yet but on changing the above to closeAction: 'destroy' the filefield works fine.
Though the hide was working in fiddle, it didn't work good for me in my project. So, I believe it is better to use the below even though the hide-closeAction may work good for others.
closeAction:'destroy' brings the browse button alright.
I'd like to use the Fuel UX datagrid to display some data I am retrieving from my database. The page is served from a ruby on rails server.
The javascript example code for building the data object:
var dataSource = new StaticDataSource({
columns: [{
property: 'toponymName',
label: 'Name',
sortable: true
}, {
property: 'countrycode',
label: 'Country',
sortable: true
}, {
property: 'population',
label: 'Population',
sortable: true
}, {
property: 'fcodeName',
label: 'Type',
sortable: true
}],
data: sampleData.geonames,
delay: 250
});
$('#MyGrid').datagrid({
dataSource: dataSource,
stretchHeight: true
});
$('#datagrid-reload').on('click', function () {
$('#MyGrid').datagrid('reload');
});
If I am understanding the code, I am going to be defining my columns and some attributes in the columns object inside of the dataSource variable, and the data object is being loaded by sampleData.geonames.
The sampleData is here
What can I do using the rails conventions to replace the sampleData.geonames? I tried tweaking this a few ways to load rails objects in to here.
For example, I modified my columns' property fields to correspond to some properties of my User model. I tried replacing the
data: sampleData.geonames,
to
data: <%= #users.to_json %>,
I'm a little restricted on gems and versions, currently using Rails 2.3.
Thanks for any help.
If you want the datagrid to make a background AJAX request to load the data from your app, please see this tutorial which will be closer to what you need:
http://dailyjs.com/2012/10/29/fuel-ux
This would have the benefit of an immediate page load followed by asynchronous loading of data.
If you would rather stick with the StaticDataSource approach just embed a small script on your page similar to this:
<script>
var myData = { ... };
</script>
Then, load that with:
var dataSource = new StaticDataSource({
columns: [ ... ],
data: myData,
delay: 250
});
I have a form with various textfields and two buttons - Export to Excel and Export to CSV.
The user can provide the values to different fields in the form and click one of the buttons.
Expected behaviour is that an Ajax request should be fired carrying the values of fields as parameters and the chosen file (Excel/CSV as per the button click) should get downloaded (I am not submitting the form as there needs to be done some processing at the values before submit).
I have been using the following code in success function of Ajax request for the download:
result = Ext.decode(response.responseText);
try {
Ext.destroy(Ext.get('testIframe'));
}
catch(e) {}
Ext.core.DomHelper.append(document.body, {
tag: 'iframe',
id:'testIframe',
css: 'display:none;visibility:hidden;height:0px;',
src: result.filename,
frameBorder: 0,
width: 0,
height: 0
});
The above code has been working fine in the case when the file is created physically at the server. But in my current project, the file is not created at the server, rather the contents are just streamed to the browser with proper headers.
Thus, is there a way to download a file using Ajax when the file is not present at the server physically? Just to add that I have a long list of parameters which I need to send to the server and hence can not add them all to the src of iframe.
Could anyone guide at this?
Thanks for any help in advance.
You may use component like this:
Ext.define('CMS.view.FileDownload', {
extend: 'Ext.Component',
alias: 'widget.FileDownloader',
autoEl: {
tag: 'iframe',
cls: 'x-hidden',
src: Ext.SSL_SECURE_URL
},
stateful: false,
load: function(config){
var e = this.getEl();
e.dom.src = config.url +
(config.params ? '?' + Ext.urlEncode(config.params) : '');
e.dom.onload = function() {
if(e.dom.contentDocument.body.childNodes[0].wholeText == '404') {
Ext.Msg.show({
title: 'Attachment missing',
msg: 'The document you are after can not be found on the server.',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
})
}
}
}
});
Put it somewhere in viewport, for example:
{
region: 'south',
html: 'South',
items: [
{
xtype: 'FileDownloader',
id: 'FileDownloader'
}
]
}
Do not forget to require it in your viewport class:
requires: [
'CMS.view.FileDownload'
]
Action handler may look like this:
var downloader = Ext.getCmp('FileDownloader')
downloader.load({
url: '/attachments/' + record.get('id') + '/' + record.get('file')
});
It's very important to have Content-Disposition header in response, otherwise nothing is downloaded.
Regards go to http://www.quispiam.com/blog/post.php?s=2011-06-09-download-a-file-via-an-event-for-extjs4
This thing works for me.