Abordagem de FileButton como menuitem de um botão

gustavo_siqueira

O FileButton do ExtJS é um botão utilizado para a escolha de arquivos no computador do usuário. Quando utilizado em uma toolbar possui o layout de um botão convencional.

Entretanto, poderá haver casos onde este componente precisará estar configurado como um menuitem de um botão, acompanhado de outras opções. Nessa ocasião, somente adicionar o FileButton como um xtype gerará um layout estranho:

Agora, utilizando uma abordagem um pouco diferente, é possível obter a mesma funcionalidade de escolha de arquivo, porém clicando em um menuitem padrão:

Código da abordagem:

Dentro da view, adicionar um menuitem que será exibido como o botão de upload desejado. Em seguida, adicionar um filebutton oculto dentro do mesmo contexto:

...
xtype: "toolbar",
dock: 'bottom',
items: [{
    text: 'Anexos',
    iconCls: 'icon-attachment',
    menu: [{
        text: 'Adicionar anexo',
        itemId: 'adicionarAnexo',
        iconCls: 'icon-new',
    }, {
        text: 'Baixar anexos',
        itemId: 'baixarAnexos',
        iconCls: 'icon-down',
    },{
        hidden:true,
        xtype: 'filebutton',
        itemId: 'fileButtonAdicionarAnexo',
        text: 'Adicionar Anexo'
    }]
}],
...

Agora, no controller, adicionar o listener de click no menuitem desejado e o evento de change no filebutton oculto.

O evento de click no menuitem irá obter o fileinput do filebutton e será acionado seu próprio método de click. Por fim, para coletar o arquivo selecionado pelo usuário é necessário acessar o fileinput e acessar o arquivo armazenado nele:

'window #adicionarAnexo': {
    click: 'onClickAdicionarAnexo'
},
'window #fileButtonAdicionarAnexo': {
    change: 'onSelectFile'
},
...

onClickAdicionarAnexo: function () {
  var me = this,
    view = me.getView();
  view.down('#fileButtonAdicionarAnexo').fileInputEl.dom.click();
},

onSelectFile: function (_this) {
    var me = this,
        arquivo = document.getElementById(_this.fileInputEl.id).files[0];
    if (arquivo) {
        ...
    }
},

...