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

问题

I've had working button with upload plugin. When my application has grown, I've rewritten this button in MVC way (just removed Ext.create, renderTo and added Ext.define) and it stopped working. Button is shown but has no plugin action (os window with file selection, etc.). Could you advice me something please?

Here is working part of code in simple "one file" style:

 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
                        }
             }),
             .....

Here is new button which is shown but do nothing:

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

Button is inserted into panel with Ext.widget('ObjectPhotosUploadBtn') call.

Here is another same unanswered question of me with more code

回答1:

Because of the way the plugin was designed, you should configure the upload object at the instance level and not at the component definition.

• Note: You should never set a static id at your class definition as you might run into problems if you instantiate it more than once.

This should work just fine:

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

For further reference, check this fiddle: https://fiddle.sencha.com/#fiddle/sm7

来源：https://stackoverflow.com/questions/32104614/extjs-4-component-with-ext-ux-upload-plugin-has-stopped-working-after-rewriting