Наверх

Прикрепление картинки к объекту на ExtJS

MyComponent.window.EditPersonal = function(config) {
  config = config || {};
  var self = this;
  Ext.applyIf(config,{
    title: _('mycomponent.title.win_edit')
    ,url: MyComponent.config.connectorUrl
    ,autoHeight: true
    ,width: 950
    ,modal: true
    ,fileUpload: true
    ,enctype : 'multipart/form-data'
    ,baseParams: {
      action: 'mgr/tgmupersonal/update'
    }
    ,fields: [{
      xtype: 'modx-tabs'
      ,defaults: { border: false ,autoHeight: true }
      ,border: true
      ,items: [{
          layout:'column'
          ,border: false
          ,anchor: '100%'
          ,items: [{
            columnWidth: .25
            ,layout: 'form'
            ,defaults: { msgTarget: 'under' }
            ,border:false
            ,items: [{
              id: 'mycomponent-personal-avatar_path-holder'
              ,fieldLabel: _('mycomponent.label_avatar_path')
              ,anchor: '100%'
              ,style: {margin: '0 0 10px 0', overflow: 'hidden', display: 'inline-block', 'vertical-align': 'top'}
              ,html: '<div style="display: inline-block; border: 1px solid #E4E4E4; border-radius: 4px; width: 192px; height: 19px; padding: 50px 15px; text-align: center;">Нет фото</div>'
              ,listeners: {
                afterrender: function() {
                 var val = Ext.getCmp('mycomponent-personal-avatar_path').getValue();
                 var valAr = val.replace('<a href="','').split('target="_blank"');
                 valAr = valAr[0].split('"');
                 val = valAr[0];
                 if (val) {
                  var tmp, filename, ext;
                  tmp = val.split('/');
                  filename = tmp[tmp.length - 1];
                  tmp = filename.split('.');
                  ext = tmp[tmp.length - 1];
                  filename = filename.replace('.' + ext, '');
                  tmp = filename.split('-uid');
                  filename = tmp[0] + '.' + ext;
                  this.update('<img src="/connectors/system/phpthumb.php?w=221&h=115&zc=1&bg=ffffff&src='+val+'&wctx=mgr&source=1" id="mycomponent-personal-avatar_path-holder-img" style="display: inline-block; border: 1px solid #E4E4E4; border-radius: 4px">'); 
                  }
                }
               }
            },{
              xtype: 'fileuploadfield'
              ,name: 'avatar_path_loader'
              ,allowBlank:true
              ,anchor: '100%'
              ,id: 'mycomponent-personal-avatar_path_loader'
              ,hidden: true
            },{
              xtype: 'button'
              ,text: 'Загрузить файл'
              ,allowBlank:true
              ,anchor: '100%'
              ,style: {'margin-left': '1px'}
              ,listeners: {
              click: {fn: function(){
                document.getElementById('mycomponent-personal-avatar_path_loader-file').click();
                document.getElementById('mycomponent-personal-avatar_path_loader-file').addEventListener('change', function() {
                document.getElementById('mycomponent-personal-avatar_path-holder').innerHTML = '<div style="display: inline-block; border: 1px solid #E4E4E4; border-radius: 4px; width: 192px; height: 19px; padding: 50px 15px; text-align: center;">' + document.getElementById('mycomponent-personal-avatar_path_loader-file').files[0].name + '</div>';
                }, false);
              }, scope: this}
              }
            },{
              xtype: 'textfield',
              name: 'avatar_path',
              id: 'mycomponent-personal-avatar_path',
              anchor: '99%',
              allowBlank: true,
              labelStyle: 'display: none;',
              style: {height: '1px', 'min-height': '1px', 'font-size': '1px', color: '#fff', padding: 0, border: 'none'}
              }]
            },{
            columnWidth: .75
            ,layout: 'form'
            ,defaults: { msgTarget: 'under' }
            ,border:false
            ,items: []
            }]
        }]
      }]
  });
  MyComponent.window.EditPersonal.superclass.constructor.call(this,config);
};
Ext.extend(MyComponent.window.EditPersonal,MODx.Window,{});
Ext.reg('mycomponent-window-tgmupersonal-edit',MyComponent.window.EditPersonal);
Код для процессора можно взять такой же, как и при прикреплении файла: https://ilyaut.ru/xpdo/add-the-file-download-window-extjs/


1 комментарий

  1. Андрей 25 марта 2018, 18:19 # 0
    Илья, а можете подробнее рассказать про этто кусок кода:
    listeners: {
                    afterrender: function() {
                     var val = Ext.getCmp('mycomponent-personal-avatar_path').getValue();
                     var valAr = val.replace('<a href="','').split('target="_blank"');
                     valAr = valAr[0].split('"');
                     val = valAr[0];
                     if (val) {
                      var tmp, filename, ext;
                      tmp = val.split('/');
                      filename = tmp[tmp.length - 1];
                      tmp = filename.split('.');
                      ext = tmp[tmp.length - 1];
                      filename = filename.replace('.' + ext, '');
                      tmp = filename.split('-uid');
                      filename = tmp[0] + '.' + ext;
                      this.update('<img src="/connectors/system/phpthumb.php?w=221&h=115&zc=1&bg=ffffff&src='+val+'&wctx=mgr&source=1" id="mycomponent-personal-avatar_path-holder-img" style="display: inline-block; border: 1px solid #E4E4E4; border-radius: 4px">'); 
                      }
                    }
                   }
    Не понял, что он делает, и как его под себя приспособить)) Я так понял -= он позволяет сразу отобразить фото загруженного файла при загрузке?)

    Авторизация

    через сервис Loginza:


    Шаблоны MODX

    1 2 Дальше »

    Объектная
    модель
    MODX