Ext JS 4에서 이미지를 포함하는 필드 클래스를 만드는 방법은 무엇입니까?

Question

난 내선 JS 4의 응용 프로그램을 생성하고있어 난 형태로 사용하는 화상을 포함하는 클래스가 필요 때문에 붙어 또는 FIELDSET (일반 텍스트 필드 등); 또한 이미지는 양식에 전달 된 값에 따라 변경됩니다. imagefield 같은 뭔가 :

Ext.define('Properties', { 
     extend : 'Ext.form.Panel', 
     alias : 'properties', 
     bodyPadding: 5, 
     // The fields 
     defaultType: 'textfield', 
      items: [{ 
      fieldLabel: 'Device Name', 
      name: 'deviceName' 
     }, 
     { 
      xtype:'imagefield', 
      fieldLabel: 'Status', 
      name: 'status' 
     } 
     ],....... 

나는 어떤 성공하지 Ext.form.field.Base를 확장하는 시도했습니다. 누군가 나를 도울 수 있습니까?

감사합니다.

Answer 1

사용할 수있는 클래스는 Ext.Image입니다. 그러나 당신은 아마 그것을 어떤 종류의 테두리에 넣고 런타임에 특정 이미지를로드하는 로직을 추가해야 할 것입니다. 원하는 경우 나중에 나중에 코드를 게시 할 수 있습니다.

업데이트 : 그런 일했다 :

Ext.define('QP.view.base.ImageContainer', { 
    extend: 'Ext.container.Container', 
    alias: 'widget.baseimagecontainer', 

    NO_IMAGE_FILE: 'resources/images/no_image.png', 
    DOWNLOAD_URL: '/Image/', 
    UPLOAD_URL:  '/UploadImage', 
    CLEAR_URL: '/ClearImage/', 

    width: 205, 
    layout: 'hbox', 

    initComponent: function() { 
     var me = this; 

     Ext.apply(me, { 
      items: [{ 
       xtype: 'fieldset', 
       itemId: 'imageWrapper', 
       title: 'Image', 
       width: 122, 
       height: 140, 
       margin: '0 0 0 0', 
       layout: 'anchor', 
       items: [{ 
        xtype: 'image', 
        itemId: 'image', 
        maxWidth: 100, 
        maxHeight: 100 
       }] 
      }, { 
       xtype: 'container', 
       margin: '4 0 0 5', 
       layout: 'anchor', 
       defaults: { 
        xtype: 'button', 
        width: 70, 
        margin: '0 0 5 0' 
       }, 
       items: [{ 
        itemId: 'clearButton', 
        text: 'Clear', 
        handler: function() { 
         me.clearImage(); 
        } 
       }, { 
        xtype: 'fileuploadfield', 
        buttonOnly: true, 
        hideLabel: true, 
        itemId: 'uploadButton', 
        buttonText: 'Upload...', 
        buttonConfig: { width: 70 }, 
        listeners: { 
         change: function(el, val) { 
          // this.up('window').fireEvent('uploadimage', fb, v); 
          me.uploadImage(el, val); 
         } 
        } 
       }, { 
        itemId: 'fullResButton', 
        text: 'Download', 
        handler: function() { 
         window.open(me.fullImagePath); 
        } 
       }] 
      }] 
     }); 

     me.callParent(arguments); 
    }, 

    success: function() { 
     var me = this, 
      fs = me.down('[itemId=imageWrapper]'), 
      b1 = me.down('[itemId=clearButton]'), 
      b2 = me.down('[itemId=fullResButton]'); 

     fs.enable(); 
     b1.enable(); 
     b2.enable(); 
    }, 

    loadImage: function(recordId) { 
     var me = this, 
      fs = me.down('[itemId=imageWrapper]'), 
      b1 = me.down('[itemId=fullResButton]'), 
      b2 = me.down('[itemId=clearButton]'), 
      img = me.down('image'); 

     me.fullImagePath = me.DOWNLOAD_URL + '/' +recordId; 
     me.imageRecordId = recordId; 

     fs.disable(); 
     b1.disable(); 
     b2.disable(); 

     img.getEl().on('load', me.success, me, { single: true }); 
     img.getEl().on('error', function() { 

      img.getEl().un('load', me.success, me); 
      img.setSrc(me.NO_IMAGE_FILE); 
      fs.enable(); 

     }, me, { single: true }); 

     img.setSrc(me.DOWNLOAD_URL + '/' +recordId); 
    }, 

    uploadImage: function(el, val) { 
     var me = this, 
      fm = Ext.create('Ext.form.Panel', { 
       items: [ el ] 
      }), 
      f = fm.getForm(); 

     f.submit({ 
      method: 'POST', 
      params: { 
       recordId: me.imageRecordId 
      }, 
      url: me.UPLOAD_URL, 
      waitMsg: 'Uploading your image...', 
      success: function(fp, o) { 
       me.loadImage(me.imageLocation, me.imageRecordId); 
      }, 
      failure: function(fp, o) { 
       console.log('upload failed', fp, o); 
      } 
     }); 
    }, 

    clearImage: function() { 
     var me = this; 

     QP.util.Msg.askConfirmation('Are you sure you want to delete an image?', function() { 
      Ext.Ajax.request({ 
       method: 'GET', 
       url: me.CLEAR_URL + me.imageLocation + '/' + me.imageRecordId, 
       success: function(fp, o) { me.loadImage(me.imageLocation, me.imageRecordId); }, 
       failure: function(fp, o) { console.log('upload failed', fp, o); } 
      }); 
     }, me); 
    } 


});