ExtJS 드롭다운 다중 선택 상자 lovcombo_javascript 기술

처음에는 옵션에 입력 체크박스만 추가하면 되는 아주 간단한 줄 알았습니다. 의외로 작동하지 않습니다. 주로 div 레이어를 사용하여 드롭다운을 시뮬레이션하는 몇 가지 구현 방법을 인터넷에서 검색했습니다. 나는 이 아이디어를 따르고 이 프로젝트의 구체적인 적용을 기반으로 직접 작성하고 싶었지만 너무 번거롭다는 것을 알았습니다. 방금 다른 프로젝트에서 extjs를 사용하고 있었는데 lovcombo 확장을 발견하고 자체 예제를 연구했습니다(extjs 버전 2.3에서는 버전 3.x에 문제가 있는 것 같습니다). 예제는 어렵지 않습니다. 기존 코드에 추가하고 원본 코드를 최대한 적게 변경하는 것이 핵심입니다.

드롭다운 다중 선택 상자를 사용하는 동안 많은 로직이 주로 데이터 소스 저장소 구성 및 선택 이벤트 처리에 중점을 둡니다. extjs 자체의 데이터와 UI 분리 모델은 캐스케이드 구현을 매우 쉽게 만듭니다. 지방 드롭다운 상자의 선택 이벤트에서 도시 드롭다운 상자의 상점을 업데이트하면 됩니다. 주의할 점은 옵션을 선택할 때 checkField 값을 사용하여 해당 옵션이 선택되었는지 취소되었는지 확인해야 한다는 것입니다. 모두 선택, 모두 선택 취소(두 개의 lovcombo에는 고유한 메소드 selectAll 및 deselectAll이 있음) 및 선택한 옵션 수(상점을 탐색하고 각 항목의 checkField 값을 감지해야 함)에 대한 옵션도 있습니다.

코드 복사 코드는 다음과 같습니다.

//드롭 이벤트 선택 -다운 박스
select:function(콤보, 레코드, 인덱스)
{
//선택됨
if(record.get(this.checkField))
{
//처리 중 선택 시 논리
}
else
{
//선택 취소
}
}