View Full Version : Opening the file explorer window from a menu item click

29 Jun 2010, 12:21 AM

I am trying to allow a user to upload a file to the server via a menu click. I have seen the examples of the custom file upload field which I see can be used in forms. I was hoping I could use the button only config option to allow me to use this extension as an item in my menu declaration to open the file explorer window directly without using an intermediary form, e.g. in a window component.

So something like...

new Ext.menu.Menu(
text: "Show On Map",
iconCls: 'map',
handler: function() {



text: "Show History",
iconCls: 'history',
handler: function() {



text: "Clear Alarms",
iconCls: 'bell',
handler: function() {

text: "Edit Details",
iconCls: 'edit',
handler: function() {

xtype: 'fileuploadfield',
buttonText: 'Change Picture',
buttonOnly: true,
iconCls: 'user'


text: "Send Message",
iconCls: 'sendmessage',
handler: function() {
alert('Not yet implemented!');

)The button renders, although the styling gets screwed up (I'm guessing as the extension is not really designed or use in menus?), but when I click the button no file explorer window opens anyway. See attached image.

Has anyone out there achieved what I am trying to do, and if so would you mind assisting me?

Thanks in advance.


29 Jun 2010, 12:35 AM
You will probably need to create your own MenuItem descendant to get this to display correctly.

The goal is to create a menuitem with a transparent <input type="file"> on top of it, so when you click the menuitem you actually click the input.

29 Jun 2010, 12:38 AM
I was worried you were going to say that! Only because thats one area I havent really had any experience in. Any chance of some pointers to help me on my way?