extjs - How to UPLOAD a file into my JS application? -

i working on extjs 4.2 application. trying create menu toolbar can add , delete files. example:

when press open, want see file browser window. , when finish choosing file , click "open", see this:

i know need use onitemclick() function open browser. have no idea how call window. how can program file extensions can chosen.

i guessing once press "open" on file browser window, file tree in left panel dynamically add file. have no idea how can connect "open" tree.

just clarify - going user based app, not going webapp. opened in user's browser , it. no need info server or send client.

edit: have been able solve part click on open file browser dialog pops up. when select file , press "open", displays message box file's name.
here code part:

    var item = ext.create('ext.form.field.file', {             buttononly: true,             buttontext: 'open',             hidelabel: true,             listeners: {                 'change': function(fb, v){                      ext.msg.alert('status', v);                   }             }     });      var mainmenu = ext.create('ext.menu.menu', {         width: 200,         margin: '0 0 10 0',         items: [item]     }); 

now problem need full path of file. message shows file's name. help?

using files on web can tricky, you're going have patient, diligent, , prepared self-learning.

a. if want compatible browsers, need upload file server, , have server return info file. or can try sencha desktop packager, flash, or signed java applets.

if okay modern browsers, need read , learn html5 file api. here's start:

https://developer.mozilla.org/en-us/docs/web/api/filereader?redirectlocale=en-us&redirectslug=dom%2ffilereader

b. start filefield button now, , add menuitem later, keep things simple. want listen filefield's change event if want read file.

c. restrict file types (only modern browsers allow this), you'll need (audio/* example):

{   xtype:'filefield',   listeners:{     afterrender:function(cmp){       cmp.fileinputel.set({         accept:'audio/*'        });     }   } } 

d. after file, want add it's info tree's treestore.