How to add a file from manu to a file tree in extjs 4.2?

Question

I have created a toolbar with menu item in it:

Ext.create('Ext.toolbar.Toolbar', {
    renderTo: document.body,
    padding: '30 0 0 0',
    width   : '100%',
    items: [
        {
            xtype: 'splitbutton',
            text : 'File',
            menu: Ext.create('Ext.menu.Menu', {
                  width: 200,
                  margin: '0 0 10 0',
                  items: [
                      {
                          text: 'Import',
                          // code here
                      }
                  ]
            })
         }
    ]
});

So what I am trying to do is to be able to use Import button just like File->Open.
I know that I can add xtype: 'filebutton', but it shows the browse button with the text field.
Also I want to let the user to choose only certain file extensions. After file is selected (we click open), I want to add it to my file tree in my viewport.

Thanks for any help.

Answer 1

I figured it out by using xtype: 'fileuploadfield' and hiding the file name/text field.

xtype: 'fileuploadfield',
buttonText : 'Open',
buttonOnly: true, 

It is as simple as it gets. Just create a toolbar and have this code in its item field.