0

私はextjs 4.2アプリケーションに取り組んでいます。ファイルを追加および削除できるメニュー ツールバーを作成しようとしています。例えば： ここに画像の説明を入力

Openを押すと、ファイルブラウザウィンドウが表示されます。ファイルの選択を終了して [開く] をクリックすると、次のように表示されます。

ここに画像の説明を入力

ブラウザーを開くにはonItemClick()関数を使用する必要があることはわかっています。しかし、そのウィンドウを呼び出す方法がわかりません。また、特定のファイル拡張子のみを選択できるようにプログラムするにはどうすればよいでしょうか。

ファイルブラウザウィンドウで「開く」を押すと、左側のパネルのファイルツリーにそのファイルが動的に追加されると思います。しかし、「オープン」を自分のツリーに接続する方法がわかりません。

明確にするために、これはユーザーベースのアプリになり、Web アプリにはなりません。これはユーザーのブラウザで開かれ、それだけです。サーバーから情報を取得したり、クライアントに何かを送信したりする必要はありません。

編集：ファイルブラウザを開くダイアログがポップアップするをクリックする部分を解決できました。次に、ファイルを選択して「開く」を押すと、ファイルの名前がメッセージ ボックスに表示されます。
その部分のコードは次のとおりです。

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

問題は、ファイルのFULL PATHを取得する必要があることです。このメッセージにはファイル名のみが表示されます。何か助けはありますか？

4

1 に答える 1

2

Web 上のファイルを使用するのは難しい場合があるため、辛抱強く、勤勉で、自己学習の準備を整える必要があります。

A. すべてのブラウザと互換性を保ちたい場合は、ファイルをサーバーにアップロードし、サーバーにファイルに関する情報を返させる必要があります。または、Sencha Desktop Packager、フラッシュ、または署名付き Java アプレットを試すことができます。

最新のブラウザーだけで問題ない場合は、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 に答える