ExtJs 4：带有 Ext.ux.upload 插件的组件在以 MVC 样式重写后停止工作

Question

我有上传插件的工作按钮。当我的应用程序增长时，我以 MVC 方式重写了这个按钮（只是删除了 Ext.create、renderTo 并添加了 Ext.define），它停止工作了。显示了按钮，但没有插件操作（os window 带有文件选择等）。你能给我一些建议吗？

这里是简单 "one file" 风格的代码工作部分：

 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') 调用将按钮插入面板。

Here is another same unanswered question of me with more code

Answer 1

由于插件的设计方式，您应该配置 upload 对象 at the instance level 而不是组件定义。

注意：永远不要在 class 定义中设置静态 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
        });
    }
});

如需进一步参考，请检查此 fiddle：https://fiddle.sencha.com/#fiddle/sm7

ExtJs 4：带有 Ext.ux.upload 插件的组件在以 MVC 样式重写后停止工作

ExtJs 4: Component with Ext.ux.upload plugin has stopped working after rewriting in MVC style

javascript

plugins

extjs

file-upload

extjs4