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

Here is another same unanswered question of me with more code

Answer 1

Благодаря тому, как плагин был разработан, вы должны настроить upload объект at the instance level, а не в определении компонента.

• Примечание. Вы никогда не должны устанавливать статический идентификатор в определении класса, поскольку вы можете столкнуться с проблемами, если вы создаете его несколько раз.

Это должно работать нормально:

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