Поместите изображение рядом с текстовым полем в форме

Question

У меня есть форма с некоторыми текстовыми полями. Одна из них - кнопка загрузки изображения. Мне нужно поместить окно предварительного просмотра изображения (div) в правую сторону поля (после кнопки поля).

Я уже делать тяжелую работу, создав DIV в afterrender события:

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» с основным полем.

{ 
    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%' 
    }] 
} 

Вот fiddle, иллюстрирующий эту концепцию

Answer 2

Это поле формы

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

Это форма Слушатель:

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 как вы хотите