0

我正在开发 extjs 4.2 应用程序。尝试创建一个菜单工具栏，我可以在其中添加和删除文件。例如： 在此处输入图像描述

当我按下Open时，我想查看文件浏览器窗口。当我完成选择文件并单击“打开”时，我会看到如下内容：

在此处输入图像描述

我知道我需要使用onItemClick()函数来打开浏览器。但我不知道如何调用那个窗口。此外，您如何编程以便只能选择某些文件扩展名。

我猜一旦您在文件浏览器窗口中按下“打开”，左侧面板中的文件树将动态添加该文件。但是不知道如何将“打开”连接到我的树。

澄清一下——这将是基于用户的应用程序，而不是网络应用程序。这将在用户的浏览器中打开，就是这样。无需从服务器获取一些信息或向客户端发送一些信息。

编辑：我已经能够解决您单击打开文件浏览器对话框弹出的部分。然后当我选择一个文件并按“打开”时，它会显示一个带有文件名的消息框。
这是该部分的代码：

    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]
    });

现在的问题是我需要获取文件的完整路径。此消息仅显示文件名。有什么帮助吗？

4

1 回答 1

2

在网络上使用文件可能会很棘手，因此您必须耐心、勤奋并为一些自学做好准备。

A. 如果您想兼容所有浏览器，您需要将文件上传到服务器，并让服务器返回有关文件的信息。或者，您可以尝试 Sencha Desktop Packager、flash 或签名的 Java Applet。

如果你只对现代浏览器没问题，你需要阅读和学习 HTML5 File API。这是一个开始：

https://developer.mozilla.org/en-US/docs/Web/API/FileReader?redirectlocale=en-US&redirectslug=DOM%2FFileReader

B. 现在从文件字段按钮开始，稍后将其添加为菜单项，以保持简单。如果您想读取文件，您将需要收听文件字段的更改事件。

C. 要限制文件类型（只有现代浏览器允许这样做），您需要执行以下操作（audio/* 只是一个示例）：

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

D. 获得文件后，您需要将其信息添加到树的 TreeStore。

于 2013-05-19T20:16:20.913 回答