イメージを次のフォームのテキストフィールドに配置します

Question

テキストフィールドを含むフォームがあります。それらの1つは画像アップロードボタンです。 フィールドプレビューボックス（div）をフィールドの右側（フィールドボタンの後）に置く必要があります。

私はすでにafterrenderイベントにdiv要素を作成することにより、ハードワークを行います。

listeners: { 
     afterrender: function (cmp) { 
      var container = this.body.dom.id; 
      $("#" + container).append('<div style="position:absolute; 
        left:DONTKNOW;top:DONTKNOW" id="myPictureDiv"></div>'); 
     } 
    } 

どのように私はExtJSのフォーム内の要素を配置することができますか？ position:absoluteを使用できますか？しかし、ボタンの位置を見つける方法は？フォームのサイズ変更はどうですか？

EDIT：scebotariのソリューションのアライメント問題を説明するための画像：このため

Answer 1

一つの解決策は、構成要素として、追加のdivを作成し、メインフィールドと「fieldcontainer」に配置することです。

listeners: { 
     afterrender: function (cmp) { 
      // Get the Window Container 
      var container = this.body.dom.id; 

      // Get the Component (ExtJS way) 
      var comp = Ext.getCmp("displayColumn"); 
      // The ExtJS field ID is not the same you gave 
      var el = comp.getEl(); 
      // Get the real Field ID 
      var displayColumnId = el.id;    
      // If you need its value... 
      var initialColor = comp.getValue(); 

      // If you need to hide the field to make room to your div... 
      // I mean if you want to replace the field and keep the label... 
      // <YOUR_FIELD_ID>-triggerWrap 
      $("#displayColumn-triggerWrap").css("display","none"); 

      // Append your div to the field container 
      // <YOUR_FIELD_ID>-bodyEl 
      $("#displayColumn-bodyEl").append(YOUR_DIV); 
     } 
} 

はdiv要素などにいくつかのスタイルを実行します。ここでは

{ 
    xtype: 'fieldcontainer', 
    layout: 'hbox', 
    items: [{ 
     xtype: 'textfield', 
     fieldLabel: 'Picture' 
    },{ 
     xtype: 'component', 
     autoEl: 'div', 
     width: 32, 
     height: 32, 
     margin: '0 0 0 5', 
     style: 'border: 1px solid #d0d0d0; border-radius: 50%' 
    }] 
} 

これは、フォームリスナーである

fieldLabel: 'My Field', 
    width: 330, 
    id: 'displayColumn', 
    name: 'displayColumn', 
    allowBlank : false, 
    value : '#CACACA', 

フォームフィールドこの概念

Answer 2

これを示すfiddleされていますあなたが望む