Extjs LabelAlign '상단'클릭 문제

Question

우리는 LabelAlign이 'top'으로 구성된 ExtJs 필드가 있지만 label을 클릭하면 필드가 초점을 맞추고 필드가 확인란 일 경우 문제가 발생하고 확인란을 클릭하면 문제가 발생합니다 확인란 필드를 선택/선택 취소합니다. 동일한 구성을 사용하지 않도록 일부 configs를 검색했지만 찾을 수 없습니다. 나중에 나는 포인터 이벤트를 사용했다 : 라벨에 CSS 속성이 없지만 정확한 해결책이 될지 확실치 않았다. 안내해주십시오.

Fiddle Example illustrating the above issue

Answer 1

등의 솔루션으로 더 멀리가 아니라 체크 박스에 모든 분야에서 일어날 것입니다하지만 당신은 필요한 레이블과 필드로 두 xtypes을 추가 할 수 있습니다 해결 방법이 있기 때문에 내가 그것에 대해 알고 없다 그것들을 vbox 레이아웃으로 배열하고 그 라벨에 다음 필드의 필드 라벨로서 'html'설정을 부여하십시오. 예를 들어

이 그래서 당신은 그것을 위해 다른 컨트롤의 라벨을 클릭하면 레이블과 필드에 대한 다를 수 CheckBoxField를위한 extjs라는 만든 따라서하지 않습니다지는 컨테이너와

{ 
xtype:'container', 
layout:{ 
type:'vbox' 
}, 
items:[ 
{ 
xtype:'label', 
html:'Email Address' 
}, 
{ 
xtype:'checkboxfield', 
name: 'email' 
} 
] 
} 

확인란을 선택하십시오.

Answer 2

레이블에서 for 특성을 제거하여 레이블 클릭이 확인란에 영향을 미치지 않도록 할 수 있습니다. 이렇게하면 레이블과 확인란 사이의 연결이 끊어집니다. 는 ExtJS에서이 작업을 수행하려면 :

Ext.query('label[id^=checkbox]').forEach(function (item) { 
    item.removeAttribute('for'); 
}); 

이 체크 박스의 레이블을 모두 찾아 레이블을 더 이상 체크 박스와 연결되어 있도록 for 속성을 제거하지 않습니다.

모든 라벨을 검색 변경, 모든 필드뿐만 아니라 체크 박스를 위해 이것을 구현하려면 : 양식을 만든 후

Ext.query('label').forEach(function (item) { 
    item.removeAttribute('for'); 
}); 

이 코드가 실행되어야한다.

업데이트 된 바이올린 here을 참조하십시오.