양식의 텍스트 필드 옆에 이미지 배치

일부 텍스트 필드가있는 양식이 있습니다. 그 중 하나는 이미지 업로드 버튼입니다. 필드 미리보기 상자 (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을 사용할 수 있습니까? 그러나 버튼 위치를 찾는 방법은 무엇입니까? 양식 크기 조정은 어떻게됩니까?

편집 : 이미지 scebotari의 솔루션 정렬 문제를 설명합니다 :

이에 대한

출처

2017-01-25 Magno C

하나 개의 솔루션은 구성 요소로 추가 사업부를 만들 메인 필드가 "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); 
     } 
}

는 사업부와 같은 몇 가지 스타일을 수행 여기

{ 
    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',

양식 필드이 개념

출처

2017-01-25 15:38:18 scebotari66

좋아요! 너 규칙! ID를 줄 수 있습니까? 내 솔루션보다 더 우아함 –

완료. 완벽하게 일했습니다. –

필드 정렬에 약간 문제가 있습니다. 내 질문에 넣어 이미지를 참조하십시오. –

이를 설명하는 fiddle입니다 너는 ~한다

출처

2017-01-25 15:44:04

양식의 텍스트 필드 옆에 이미지 배치

답변

관련 문제