0

如何使用不同的按钮或组件打开文件字段的文件选择对话框？我尝试通过互联网搜索，但找不到解决方案。我想要做的是在单击面板时打开文件选择对话框。

4

4 回答 4

6

您必须filefield在 DOM 级别触发“浏览...”按钮的点击事件。简单地说，这个想法是获取对的引用<input>并启动它的点击事件。

这是一个示例（也在JSFiddle - http://jsfiddle.net/fa4bwp7q/3/上）：

var fileField = Ext.create('Ext.form.field.File', { renderTo: 'myDiv', hidden: true });

var textField = Ext.create('Ext.form.field.Text', {
    renderTo: 'myDiv',
    listeners: {
        change: function(btn, newValue) {
            fileField.fileInputEl.dom.click();
        }
    }
});

这应该在键入时打开文件浏览器textfield，而filefield始终保持隐藏状态。

这甚至适用于 ExtJS 5。

于 2014-12-17T23:41:35.750 回答
1

如果您需要通过单击另一个按钮来触发一个按钮的单击...那么您可以执行以下操作：

// .....
buttons:
[
    { 
        text: 'Open File',
        id: 'open_button',
        handler: function()
        {
            // open the dialog box and 
            // do what you need
        }
    },
    {
        text: 'Another button',
        handler: function()
        {
            // here you can click the Open File button 
            Ext.get('open_button').el.dom.click();
        }
    } 
]
//  ....

奇迹般有效。你甚至可以查看这个DEMO。在Upload按钮处理程序中，我正在提醒一些文本。如果你点击test按钮，它实际上会点击Upload按钮。

过了一段时间，Sencha 的试用网站上看不到那个演示，所以你可以把我的代码复制到适当的地方。

祝你好运

于 2013-08-02T04:39:40.367 回答
1

简短的回答是你不能。用户需要直接与按钮交互以使其打开。

Ext 在幕后所做的是将文件输入元素放在按钮内，该元素与所述按钮的尺寸无形匹配。因此，当您单击按钮时，它会触发文件上传。该机制用于提供样式。

于 2013-08-02T03:08:11.480 回答
0

看这个截图：http: //ic.pics.livejournal.com/werdender/15522933/44207/44207_original.jpg

蓝色表示无形<input type="file">。

文件字段位于“浏览...”按钮上方。当您单击“浏览...”按钮时，您实际上是在单击不可见的文件字段。

无法以编程方式单击文件字段。

但你可以创建一个肮脏的黑客：http: //jsfiddle.net/W2ffW/

因此，主输入将仅包含一个文本值，但您可以覆盖其方法 extractFileInput() 等 - 这是另一个问题。

于 2013-08-17T22:25:23.230 回答