ExtJs: How to use plugin within defined component

问题:

Due to the lack of experience, I can't find how to activate an upload plugin in button component using MVC architecture. When I used few files, this plugin works perfect. But when I started to move to MVC direction, everything begin to fall apart.

Here is how I initialize the plugin:

Ext.Loader.setConfig( {
        enabled: true,
        paths: {
            'Ext.ux.upload': 'ext-4.2.1.883/src/ux/upload/'
        }
    });
Ext.require([
    ....
    'Ext.ux.upload.Button',
    'Ext.ux.upload.plugin.Window',
    .....

Here is the "old way" which worked perfect (button is situated on a panel, when you click it, the plugin upload window opens):

ObjectPhotosTab = Ext.create('Ext.Panel', {
        disabled    : true,
        id          : 'ObjectPhotosTab',
        collapsible : true,
        frame       : true,
        title       : 'Photos',
        items       : [
            //here goes button with upload plugin
            Ext.create('Ext.ux.upload.Button', {
                text        : 'Select files',
                id          : 'ObjectPhotosUploadBtn',
                SelectedObjectId     : 0,
                autoRender  : true,
                hidden      : true,
                plugins: [{
                    ptype   : 'ux.upload.window',
                    title   : 'Upload',
                    width   : 320,
                    height  : 350,
                    pluginId: 'pid'
                }],
                uploader: {
                    url             : MainSiteUrl + 'getimages.php?a=a&Object=',
                    uploadpath      : '/Root/files',
                    autoStart       : true,
                    max_file_size   : '2020mb',
                    statusQueuedText: 'Ready to upload',
                    statusUploadingText: 'Uploading ({0}%)',
                    statusFailedText: '<span style="color: red">Error</span>',
                    statusDoneText: '<span style="color: green">Complete</span>',
                    statusInvalidSizeText: 'File too large',
                    statusInvalidExtensionText: 'Invalid file type'
                },
                listeners: {
                    filesadded: function(uploader, files) {
                        console.log('filesadded');
                        return true;
                    },
                    .......,
                    scope: this
                }
            }),
            Ext.getCmp('ImagesDataView') // other stuff

        ]
    });

In my new application I have moved an upload button to the "view" directory (surely through controller) and put plugin params to initComponent like 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,
    initComponent: function() {
        this.plugins = {
            ptype   : 'ux.upload.window',
            title   : 'Upload',
            width   : 320,
            height  : 350,
            pluginId: 'pid'
        };
        this.uploader ={
            // exactly the same stuff
        };
        this.listeners = {
            // exactly the same stuff
        };
        this.callParent();
    }
})

New defined button class is called from a panel like this:

   ObjectPhotosTab = Ext.create('Ext.Panel', {
        disabled    : true,
        id          : 'ObjectPhotosTab',
        collapsible : true,
        frame       : true,
        title       : 'Photos',
        items       : [
            Ext.widget('ObjectPhotosUploadBtn'), // call button via widget
            Ext.getCmp('ImagesDataView') // other stuff

        ]
    });

Here is the header of file /ext-4.2.1.883/src/ux/upload/plugin/Window.js

/**@class Ext.ux.upload.plugin.Window
 * @extends Ext.AbstractPlugin
 * @author Harald Hanek (c) 2011-2012
 * @license http://harrydeluxe.mit-license.org*/

Ext.define('Ext.ux.upload.plugin.Window', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.ux.upload.window',
    requires: [ 'Ext.ux.statusbar.StatusBar',
                'Ext.ux.statusbar.ValidationStatus' ],
    constructor: function(config) {
        var me = this;
        Ext.apply(me, config);
        me.callParent(arguments);
    },
    init: function(cmp) {
        var me = this,
            uploader = cmp.uploader;
        cmp.on({
            filesadded: {
      ......

Here is the header of file /ext-4.2.1.883/src/ux/upload/Button.js

/**@class Ext.ux.upload.Button
 * @extends Ext.button.Button
 * @author Harald Hanek (c) 2011-2012
 * @license http://harrydeluxe.mit-license.org */
Ext.define('Ext.ux.upload.Button', {
    extend: 'Ext.button.Button',
    alias: 'widget.uploadbutton',
    requires: ['Ext.ux.upload.Basic'],
    disabled: true,
    constructor: function(config) {
        var me = this;
        config = config || {};
        Ext.applyIf(config.uploader, {
            browse_button: config.id || Ext.id(me)
        });
        me.callParent([config]);
    },
    initComponent: function() {
        var me = this,
            e;
        me.callParent();
        me.uploader = me.createUploader();
    ......

The problem is that the button is created successfully but it does not do needed plugin action.

I see no errors in ff/chrome console also.

When I inspect "crm.view.ObjectPhotosUploadBtn" through the Illuminations ff plugin, I can see all needed plugin properties of this class.

Please help me to solve this question.

回答1:

There is too much code for me to quote, but the problem lies in this snippet:

Ext.define('crm.view.ObjectPhotosUploadBtn',{
    extend: 'Ext.ux.upload.Button',
    ...
    initComponent: function() {
        this.plugins = {
        ...
        };
    }
});

By the time initComponent is executed, the plugins have already been constructed and initialized in the constructor, and your initComponent overwrites all that.

What you need instead is to move the plugins blob into the class definition:

Ext.define('crm.view.ObjectPhotosUploadBtn', {
    extend: 'Ext.ux.upload.Button',
    ...
    plugins: [{
        ptype   : 'ux.upload.window',
        title   : 'Upload',
        width   : 320,
        height  : 350,
        pluginId: 'pid'
    }]
});

The same goes for uploader and listeners assignments.