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