將圖片放在下一個文本框中

我有一個帶有文本框的表單。其中之一是圖片上傳按鈕。我需要將圖像預覽框（一個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嗎？但如何找到按鈕的位置？窗體大小調整呢？

編輯：圖片來說明scebotari的溶液對準問題：

此

來源

2017-01-25 Magno C

一種解決方案是創建附加的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說明這個概念

來源

2017-01-25 15:38:18 scebotari66

太棒了！你統治！我可以給它一個ID嗎？比我的解決方案更優雅 –

完成。完美工作。 –

我在字段對齊方面有點問題。請看我放在我的問題中的圖像。 –

這是表單字段

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作爲你希望

來源

2017-01-25 15:44:04

將圖片放在下一個文本框中

回答

相關問題