Question

由于缺乏经验，我无法找到如何使用MVC架构激活按钮组件中的上传插件。当我使用少量文件时，这个插件非常完美。但当我开始转向MVC方向时，一切都开始分崩离析。

以下是我初始化插件的方法：

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',
    .....

这是＆＃34;旧方式＆＃34;哪个工作完美（按钮位于面板上，当您单击它时，插件上传窗口打开）：

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

        ]
    });

在我的新应用程序中，我已将上传按钮移至＆＃34;视图＆＃34;目录（当然通过控制器）并将插件参数放到initComponent中，如下所示：

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

从这样的面板调用新定义的按钮类：

   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

        ]
    });

这是文件的标题/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: {
      ......

这是文件的标题/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();
    ......

问题是按钮创建成功但没有执行所需的插件操作。

我也看不到ff / chrome控制台中的错误。

当我检查＆＃34; crm.view.ObjectPhotosUploadBtn＆＃34;通过Illuminations ff插件，我可以看到这个类所需的所有插件属性。

请帮我解决这个问题。

Answer 1

我引用的代码太多了，但问题出在这个代码段中：

listenTCP

到执行Ext.define('crm.view.ObjectPhotosUploadBtn',{ extend: 'Ext.ux.upload.Button', ... initComponent: function() { this.plugins = { ... }; } });时，插件已经在构造函数中构造并初始化，而initComponent会覆盖所有插件。

您需要的是将插件blob移动到类定义中：

initComponent

Ext.define('crm.view.ObjectPhotosUploadBtn', { extend: 'Ext.ux.upload.Button', ... plugins: [{ ptype : 'ux.upload.window', title : 'Upload', width : 320, height : 350, pluginId: 'pid' }] });和uploader作业也是如此。

ExtJs：如何在MVC架构中定义的组件中使用插件？

1 个答案: