<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Abordagem de FileButton como menuitem de um botão]]></title><description><![CDATA[<p dir="auto">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.</p>
<p dir="auto">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:</p>
<p dir="auto"><img src="/assets/uploads/files/1635336404430-b5f4b50f-81aa-4234-94fb-731dcc0f9f70-image.png" alt="b5f4b50f-81aa-4234-94fb-731dcc0f9f70-image.png" class="img-responsive img-markdown" /></p>
<p dir="auto">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:</p>
<p dir="auto"><img src="/assets/uploads/files/1635336624533-74da48f4-08b9-4223-bccc-e899b4056726-image.png" alt="74da48f4-08b9-4223-bccc-e899b4056726-image.png" class="img-responsive img-markdown" /></p>
<p dir="auto">Código da abordagem:</p>
<p dir="auto">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:</p>
<pre><code>...
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'
    }]
}],
...
</code></pre>
<p dir="auto">Agora, no controller, adicionar o <em>listener</em> de <em>click</em> no menuitem desejado e o evento de <em>change</em> no filebutton oculto.</p>
<p dir="auto">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:</p>
<pre><code>'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) {
        ...
    }
},

...
</code></pre>
]]></description><link>http://insoft-docker1:4567/topic/62/abordagem-de-filebutton-como-menuitem-de-um-botão</link><generator>RSS for Node</generator><lastBuildDate>Fri, 23 Oct 2026 05:37:03 GMT</lastBuildDate><atom:link href="http://insoft-docker1:4567/topic/62.rss" rel="self" type="application/rss+xml"/><pubDate>Wed, 27 Oct 2021 12:18:47 GMT</pubDate><ttl>60</ttl></channel></rss>