PDA

View Full Version : fileuploadfield + reset button



DDarko
26 Jul 2011, 10:28 PM
I would like to write an expansion fileuploadfield UX. Unfortunately I have no idea how to do it.
Additional functionality is to be another button on the right side, which would allow clearing (restart) the selected file ( .setValue('') ).
If the file field is one of several fields on one form and is optional. And someone selects a file and then want to remove it, for the moment there is no such possibility. Form Reset clears entire form other fields we do not want.

Of course I can add a button below that will perform this operation. But I do not know how to add another button to the right in: src/form/field/File.js next to me.button.

Maybe someone could help?

rpiwonka
28 Jul 2011, 2:16 PM
Create a Ext.form.FieldContainer and place both the fileupload and the reset button inside this container. you will find a description and example here: http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.FieldContainer

DDarko
29 Jul 2011, 2:33 AM
Of course I thought about it. But I think it applies somehow wrong.

before:
http://ddarko.org/1.png
form/File.js :


createButton: function() {
var me = this;
me.button = Ext.widget('button', Ext.apply({
renderTo: me.bodyEl,
text: me.buttonText,
cls: Ext.baseCSSPrefix + 'form-file-btn',
preventDefault: true,
style: me.buttonOnly ? '' : 'margin-left:' + me.buttonMargin + 'px',
handler: me.buttonHandler,
field: me
}, me.buttonConfig));
},



after:
http://ddarko.org/2.png


createButton: function() {
var me = this;
me.button = Ext.create('Ext.form.FieldContainer', {
renderTo: me.bodyEl,
layout: 'hbox',
items:[
Ext.widget('button', Ext.apply({
text: me.buttonText,
cls: Ext.baseCSSPrefix + 'form-file-btn',
preventDefault: true,
style: me.buttonOnly ? '' : 'margin-left:' + me.buttonMargin + 'px',
handler: me.buttonHandler,
field: me
}, me.buttonConfig)),

Ext.widget('button', {
text: '2',
cls: Ext.baseCSSPrefix + 'form-file-btn',
preventDefault: true,
style: me.buttonOnly ? '' : 'margin-left:' + me.buttonMargin + 'px',
field: me
})
]
});
},

Jangla
19 May 2013, 11:01 AM
I'm actually interested in learning whether this is possible too. Rather than have to change thousands of field definitions in a massive application, I thought I would be able to write it as a plugin (or rather I could write many useful button plugins) which could easily be applied to fields as required.

The obvious problem I'm running into is adding the button (or buttons if I was to apply more than one additional button plugin) in the correct place relative to the field.

Is it even possible to wrap the field in a field container at run time? any help or pointers on things to try greatly appreciated.