fileuploadfield + reset button

[DDarko]

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]

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/#/...FieldContainer

[DDarko]

Of course I thought about it. But I think it applies somehow wrong.

before:

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:

 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]

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.