ExtJs 4：具有Ext.ux.upload插件的組件在以MVC樣式重寫后已停止工作

Question

我有上傳插件的工作按鈕。 當我的應用程序增長時，我已經以MVC方式重寫了此按鈕（只是刪除了Ext.create，renderTo並添加了Ext.define），並且它停止了工作。 顯示了按鈕，但沒有插件操作（帶有文件選擇的os窗口等）。 你能給我一些建議嗎？

這是簡單的“一個文件”樣式的代碼的工作部分：

 ObjectPhotosTab = Ext.create('Ext.Panel', {
        id          : 'ObjectPhotosTab',
        items       : [
              Ext.create('Ext.ux.upload.Button', {
                    text        : 'Select files',
                    id          : 'ObjectPhotosUploadBtn',
                    SelectedObjectId     : 0,
                    autoRender  : true,
                    hidden      : true,
                    plugins: [{
                        ptype   : 'ux.upload.window',
                        pluginId: 'pid',
                        ...
                    }],
                    uploader: {
                        url             : MainSiteUrl + 'getimages.php?a=a&Object=',
                        uploadpath      : '/Root/files',
                        autoStart       : true,
                        max_file_size   : '2020mb',
                        statusQueuedText: 'Ready to upload',
                        .....
                    },
                    listeners: {
                            filesadded: function(uploader, files) {
                                console.log('filesadded');
                                return true;
                            },
                            ....
                            scope: this
                        }
             }),
             .....

這是顯示的新按鈕，但不執行任何操作：

Ext.define('crm.view.ObjectPhotosUploadBtn',{
    extend: 'Ext.ux.upload.Button',
    text        : 'Select files',
    id          : 'ObjectPhotosUploadBtn',
    alias       : 'widget.ObjectPhotosUploadBtn',
    SelectedObjectId     : 0,
    autoRender  : true,
    hidden      : false,
    plugins: [{
        ptype   : 'ux.upload.window',
        pluginId: 'pid',
        .....
    }],
    uploader: {
        url             : MainSiteUrl + 'getimages.php?Object=',
        uploadpath      : '/Root/files',
        autoStart       : true,
        max_file_size   : '2020mb',
        statusQueuedText: 'Ready to upload',
        .....
    },
    listeners: {
        filesadded: function(uploader, files) {
            console.log('filesadded');
            return true;
        },
        .....
        scope: this
    }
})

通過Ext.widget（'ObjectPhotosUploadBtn'）調用將按鈕插入面板。

這是我的另一個相同的未解決問題，帶有更多代碼

Answer 1

由於插件的設計方式，您應該at the instance level而不是組件定義位置配置上upload對象。

• 注意：永遠不要在類定義中設置靜態ID，因為如果實例化一次以上，則可能會遇到問題。

這應該可以正常工作：

Ext.define('MyApp.button.UploadButton',{
    extend: 'Ext.ux.upload.Button',
    requires : [
        'Ext.ux.upload.plugin.Window'
    ],
    alias : 'widget.cutomuploadbutton',
    text : 'Select files',
    SelectedObjectId     : 0,
    plugins: [{
        ptype   : 'ux.upload.window',
        pluginId: 'pid',
    }],
    listeners: {
        filesadded: function(uploader, files) {
            console.log('filesadded');
            return true;
        },
        scope: this
    }
});

Ext.application({
    name : 'MyApp',

    launch : function() {

        Ext.create('Ext.Panel', {
            title: 'Test pUpload',
            width: 500,
            height: 500,
            items       : [{
                xtype : 'cutomuploadbutton',
                id: 'ObjectPhotosUploadBtn',
                uploader: {
                    url             : 'Foo' + 'getimages.php?Object=',
                    uploadpath      : '/Root/files',
                    autoStart       : true,
                    max_file_size   : '2020mb',
                    statusQueuedText: 'Ready to upload'
                }
            }],
            renderTo : document.body
        });
    }
});

有關更多參考，請檢查以下提琴： https : //fiddle.sencha.com/#fiddle/sm7