6

クリックするとファイルチューザーが開き、ファイルを選択した場合はアップロードする必要がある「アップロードボタン」という1つのボタンだけでファイルをアップロードしたい。

input[type=file]ビューやその他のラベルは表示されませんが、ボタンは 1 つだけです。

jQuery や JavaScript だけで簡単にできることはわかっていますが、Extjs には比較的慣れていないので、助けを求めてここに書きます。

以下は、ドキュメントのサンプル ファイル アップローダです。ニーズに合わせてカスタマイズするにはどうすればよいですか。

Ext.create('Ext.form.Panel', {
title: 'Upload a Photo',
width: 400,
bodyPadding: 10,
frame: true,
renderTo: Ext.getBody(),
items: [{
    xtype: 'filefield',
    name: 'photo',
    fieldLabel: 'Photo',
    labelWidth: 50,
    msgTarget: 'side',
    allowBlank: false,
    anchor: '100%',
    buttonText: 'Select Photo...'
}],

buttons: [{
    text: 'Upload',
    handler: function() {
        var form = this.up('form').getForm();
        if(form.isValid()){
            form.submit({
                url: 'photo-upload.php',
                waitMsg: 'Uploading your photo...',
                success: function(fp, o) {
                    Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
                }
            });
        }
    }
}]
});
4

4 に答える 4

6

必要な設定だと思いbuttonOnly : trueます。ファイルパスフィールドを非表示にします。

hideLabel : trueフィールド ラベルを非表示にするためにも使用します。

アップロード ファイル フィールド イベント リスナにアップロード ファイル コードを含めます。それが役に立ったことを願っています。

于 2013-10-31T02:18:15.877 に答える
1

同じ問題が発生したときに私がしたことは次のとおりです。

var form = Ext.create('Ext.form.Panel', {
        items: new Ext.create('Ext.form.field.File', {

            buttonOnly: true,
            hideLabel: true,
            buttonText: 'Carregar Playlist.',
            listeners: {
                'change': function(fb, v) {
                    form.getForm().submit({
                        method: 'POST',
                        url: 'carregaLista.php',
                    });
                }
            }
        }),
        //renderTo: 'buscaPlaylist'
    });

それが役に立てば幸いです、乾杯。

于 2014-10-14T18:19:58.033 に答える
1

ファイルアップロードフィールド

items:[{ xtype : 'fileuploadfield', 
anchor : '100%', 
emptyText : 'Select File',
name : 'fileData', 
fieldLabel : 'Select File', 
allowBlank : false, 
forceSelection : true 
}]

アップロードハンドラ

function() {
    var form = Ext.getCmp('form').getForm();
    if(form.isValid()) {
     form.submit({
        url : uploadFileURL,
        headers : {'Content-Type':'multipart/form-data; charset=UTF-8'},
        method : 'POST',
                waitMsg : 'Please wait...while uploading..!!',
                success : function (form, action) {
                        Ext.Msg.alert('Upload file..', action.result.message);
            Ext.getCmp('uploadWindow').destroy();
                 },
                 failure: function(form, action) {
                 Ext.Msg.alert('Upload file..', action.result.message);
                 }
       });
   }

};

それが役に立てば幸い ：）

于 2013-10-29T06:29:35.233 に答える