Accept Image in Filefield ExtJs - javascript

I have a filefield componente in my application and I want to restrict it to only image files. I've found this question on stackoverflow:
How to restrict file type using xtype filefield(extjs 4.1.0)?
Add accept="image/*" attribute to input field in ExtJs
I'm using this code:
{
xtype:'filefield',
listeners:{
afterrender:function(cmp){
cmp.fileInputEl.set({
accept:'audio/*'
});
}
}
}
But this code only works the first time I click on "Examine" button, when I click again on it, the restriction dissapears. I've been looking for other events like onclick to write this code in that event, but I don't find the best way to do it, Anyone has any idea?
Greetings.

This is happening because when you submit form, it calls Ext.form.field.File#reset().
You should override reset() method like this, to keep you accept property:
{
xtype:'filefield',
reset: function () {
var me = this,
clear = me.clearOnSubmit;
if (me.rendered) {
me.button.reset(clear);
me.fileInputEl = me.button.fileInputEl;
me.fileInputEl.set({
accept: 'audio/*'
});
if (clear) {
me.inputEl.dom.value = '';
}
me.callParent();
}},
listeners:{
afterrender:function(cmp){
cmp.fileInputEl.set({
accept:'audio/*'
});
}
}
}

Related

Can i insert IF statements in Kendo Dialog actions?

I'm trying to make a Kendo dialog pop-up. But i need to hide a button under a certain condition. Can i make an if statement somewhere in actions property or is there any other way to hide them from outside?
I know that you can do whatever in content property, but i was wondering if i can customize existing buttons. This is how i theoretically imagined it but it didn't work
actions: [{
if(link !=null) {
text: linkName,
action: function (e) {
window.location = link;
return true;
},
}
}, {
text: 'Закрыть',
action: function (e) {
Close();
return true;
}
}]
As briosheje said, you have to define array before rendering the widget, but you can update existing dialog's actions with setOptions method. You can check a basic example at https://dojo.telerik.com/EJefarON/8

How to include files added to grid on form submit

I have a form with fields and a grid.
{ textfield },
{ textfield },
{ textfield },
etc...,
{ grid with toolbar: filefield }
On the grid, I have added a filefield toolbar which I have added a change listener to add the file to the grid:
addAttachment: function (field, value, eOpts) {
var me = this,
grid = field.up('grid'),
gridStore = grid.getStore();
gridStore.add(
{
filename: value,
dateadded: new Date()
});
}
Basically, I want to add the attachments to the grid first so that I can send multiple files to the server. Is this possible?
Currently, doing form.getValues() only gets the other fields inside the form but not the toolbar. Getting the store items also doesn't seem to include the correct file paths as they are prefixed with c:\fakepath\.
What I want is to only push all form values including all the files which are stored in the grid on the Save event. Any luck guys?
Ok. Since, no one answered, here's what I've done:
First, instead of using a filefield in the tbar of the grid, I use a button instead. I've added a click listener to that button which adds a hidden filefield to the form:
addAttachment: function (button) {
var me = this,
form = button.up('form'),
grid = button.up('grid'),
gridStore = grid.getStore(),
newFileField = {
xtype: 'filefield',
hidden: true,
unused: true, //custom property to check if there is already an unused field
listeners: {
change: function (field, value, eOpts) {
gridStore.add(
{
filename: value,
dateadded: new Date()
});
field.unused = false;
}
}
};
//if there is already an unused field, we don't need to add a newField to the form
if (!form.down('filefield[unused=true]')) {
form.add(newFileField);
}
//imitate the filefield trigger. this will show the file dialog
form.down('filefield[unused=true]').fileInputEl.dom.click();
}
So that's it. Basically, the button just imitates the filefield file dialog trigger but what actually happens is it adds a new filefield to the form. So calling form.getForm().submit() now includes all files which are also in the grid.
I hope this should help anyone in the future.
CHEERS!

Open File Selection dojox/Uploader programmatically

I need to select a file to upload with dojox/Uploader by clicking on a div not related to the widget.
I've tried using on.emit, but nothing happens (also click(), onclick() etc... on domNodes..)
This is my code:
var myUploader = new dojox.form.Uploader({
id : 'myUploader',
url : baseUrl + '/upload/form',
style : {
'overflow': 'hidden',
'position': 'relative',
'opacity' : 0
}
},"uploaderHolder");
myUploader.startup();
var importButtonNode = dom.byId("importDivButton");
on(importButtonNode,"click",function(evt) {
on.emit(myUploader.domNode, "click", {
bubbles: true,
cancelable: false
});
The widget must be hidden, so I can't press widget select button. I need open select file dialog by click other div so... how can I open the file browser programmatically to select a file?
Well, I find out a solution. I take a widgets inner node to call click, and attach a listener to the Uploader change event and complete event...
First, attach click event to a node.
var importButtonNode = dom.byId("myImportDiv");
on(importButtonNode,"click",function(evt) {
myUploader.domNode.childNodes[0].click();
});
Attach to Uploader change and complete events a handler
myUploader.on("change",function(evt){
if(evt[0].type != FileTypes.XSLX_FILE_TYPE){
alert("Error file type must be XLSX");
} else {
var formData = new Object();
formData.idProject = project.id;
myUploader.upload(formData);
}
});
myUploader.on("complete",function(evt){
alert("File Uploaded");
// do things
});
In my case I need send formdata without a form... so use de upload method. Also the file must be XLSX.
I hope this helps.
Regards

Remove from a ComboBox a parameter in extjs 3.4

I want to remove a parameter from the store of a comboBox before it shows to the user, I know more or less how to do it but it´s not working properly, any one could give some solution? Maybe I need to select an specific event, but I tried with all the events that make sense and didn´t work, Here is the code:
var combo = fwk.ctrl.form.ComboBox({
storeConfig: {
url: app.bo.type.type_find
,fields: ['id', 'code']
}
,comboBoxConfig:{
triggerAction: 'all'
,allowBlank:false
}
});
combo.on('beforeshow', function() {
combo.store.removeAt(2);
});
Thank you very much!!!
Try removing it inside 'afterRender' event,
sample code:
listeners: {
'afterrender': function(comboRef) {
comboRef.store.removeAt(2);
}
}
Here you have the solution,
combo.getStore().load({
callback: function (r, options, success) {
if (success) {
combo.store.removeAt(2);
}
}
});
Is necessary to change it before the load of the store because first is painted the combobox and then is charged with the store data I was erasing data in a empty store.

Redefining a jQuery dialog button

In our application we use a general function to create jQuery dialogs which contain module-specific content. The custom dialog consists of 3 buttons (Cancel, Save, Apply). Apply does the same as Save but also closes the dialog.
Many modules are still using a custom post instead of an ajax-post. For this reason I'm looking to overwrite/redefine the buttons which are on a specific dialog.
So far I've got the buttons, but I'm unable to do something with them. Is it possible to get the buttons from a dialog (yes, I know) but apply a different function to them?
My code so far:
function OverrideDialogButtonCallbacks(sDialogInstance) {
oButtons = $( '#dialog' ).dialog( 'option', 'buttons' );
console.log(oButtons); // logs the buttons correctly
if(sDialogInstance == 'TestInstance') {
oButtons.Save = function() {
alert('A new callback has been assigned.');
// code for ajax-post will come here.
}
}
}
$('#dialog').dialog({
'buttons' : {
'Save' : {
id:"btn-save", // provide the id, if you want to apply a callback based on id selector
click: function() {
//
},
},
}
});
Did you try this? to override button's callback based on the need.
No need to re-assign at all. Try this.
function OverrideDialogButtonCallbacks(dialogSelector) {
var button = $(dialogSelector + " ~ .ui-dialog-buttonpane")
.find("button:contains('Save')");
button.unbind("click").on("click", function() {
alert("save overriden!");
});
}
Call it like OverrideDialogButtonCallbacks("#dialog");
Working fiddle: http://jsfiddle.net/codovations/yzfVT/
You can get the buttons using $(..).dialog('option', 'buttons'). This returns an array of objects that you can then rewire by searching through them and adjusting the click event:
// Rewire the callback for the first button
var buttons = $('#dialog').dialog('option', 'buttons');
buttons[0].click = function() { alert('Click rewired!'); };
See this fiddle for an example: http://jsfiddle.net/z4TTH/2/
If necessary, you can check the text of the button using button[i].text.
UPDATE:
The buttons option can be one of two forms, one is an array as described above, the other is an object where each property is the name of the button. To rewire the click event in this instance it's necessary to update the buttons option in the dialog:
// Rewire the callback for the OK button
var buttons = $('#dialog').dialog('option', 'buttons');
buttons.Ok = function() { alert('Click rewired!'); };
$('#dialog').dialog('option', 'buttons', buttons);
See this fiddle: http://jsfiddle.net/z4TTH/3/
Can you try binding your new function code with Click event of Save?
if(sDialogInstance == 'TestInstance') {
$('#'+savebtn_id).click(function() {
alert('A new callback has been assigned.');
// code for ajax-post will come here.
});
}

Categories