javascript - sencha - extjs docs

ExtJs 4: el componente con el complemento Ext.ux.upload ha dejado de funcionar después de volver a escribir en estilo MVC

Question

He tenido botón de trabajo con el complemento de carga. Cuando mi aplicación ha crecido, he reescrito este botón en modo MVC (simplemente eliminé Ext.create, renderTo y agregué Ext.define) y dejó de funcionar. El botón se muestra pero no tiene acción de complemento (ventana del sistema operativo con selección de archivos, etc.). ¿Podrías avisarme algo por favor?

Aquí está trabajando parte del código en un estilo simple de "un archivo":

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

Aquí hay un botón nuevo que se muestra pero no hace nada:

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

El botón se inserta en el panel con la llamada Ext.widget (''ObjectPhotosUploadBtn'').

Aquí hay otra pregunta sin respuesta mía con más código

Answer 1

Debido a la forma en que se diseñó el complemento, debe configurar el objeto de upload at the instance level y no en la definición del componente.

• Nota: Nunca debe establecer una identificación estática en la definición de su clase, ya que podría tener problemas si la crea más de una vez.

Esto debería funcionar bien:

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

Para mayor referencia, revise este violín: https://fiddle.sencha.com/#fiddle/sm7