>웹 프론트엔드 >JS 튜토리얼 >ExtJS TabPanel beforeremove beforeclose 사용 지침_extjs

ExtJS TabPanel beforeremove beforeclose 사용 지침_extjs

WBOY
WBOY원래의
2016-05-16 18:31:05947검색

현재 시스템은 프런트엔드 프레임워크로 Extjs를 사용합니다. 시스템 홈페이지 레이아웃은 왼쪽에 아코디언 스타일의 메뉴 표시줄이 있고 가운데 영역에 TabPanel 컨테이너가 있는 테두리 방식을 채택하고 있습니다. 해당 패널을 중간 영역에 추가하세요. 패널은 추가된 그리드뷰에 포함되어 있습니다.

현재 문제는 사용자가 닫을 때 사용자에게 메시지를 표시하고 싶다는 것입니다. 현재 페이지(패널)를 삭제하거나 현재 패널을 숨기고 임시 데이터를 저장할지 여부를 사용자 선택

추가된 패널이 beforeclose 이벤트를 수신하도록 Extjs API 문서 보기

주요코드는

중간부분 :

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

//centerPanel
centerPanel = new Ext.TabPanel({
id: 'centerPnl'
, 지역: 'center'
, border: false
, iconCls : 'tabs'
, 활성화TabScroll: true
, items: [{
title: 'Home'
, autoScroll: true
}]
, 기본값: { autoScroll: true }
}); 새 패널 기능 추가 addCMUAMS_LogTab() {
activeCMUAMS_LogTab = centerPanel.add({
id: 'CMUAMS_LogShowAll'
, title: 'System log'
, iconCls: ' tabs'
, closable: true
, bodyStyle: 'padding:10px'
, 항목: CMUAMS_LogGrid
, 청취자: { beforeclose:TabCloseConfirm }
})
activeCMUAMS_LogTab.show( );
}

그런데 이 경우 상황은 다음과 같습니다.
ExtJS TabPanel beforeremove beforeclose 사용 지침_extjs
'접속 전' 전에 패널이 닫혔습니다. 그러다가 구글에 가서 찾아보니 정보를 올렸는데 갑자기 TabePanel이 컨테이너로서 이벤트를 먼저 차단해야 한다는 생각이 들었습니다. 그래서 중간 부분의 코드는 다음과 같이 수정됩니다. //centerPanel
코드 복사 코드는 다음과 같습니다

centerPanel = new Ext.TabPanel({
id: 'centerPnl'
, 지역: 'center'
, border: false
, iconCls: 'tabs'
, 활성화TabScroll: true
, 항목: [{
title: 'Home'
, autoScroll: true
}]
, 기본값: { autoScroll: true }
//먼저 듣기 beforeremove 이벤트
, 리스너: { beforeremove: function(ct,comComponent ) { return false } }
})

다시 실행하여 효과를 확인하세요.
ExtJS TabPanel beforeremove beforeclose 사용 지침_extjs
이 작업을 수행하려면 패널을 클릭해야 합니다. 버튼을 닫을 때 TabPanel 컨테이너의 Remove 이벤트가 먼저 실행되어야 하며 그 다음 Panel 자체의 Close 이벤트가 실행됩니다. 서두르세요. 그래서 자세히 알아볼 시간이 없습니다. 저는 JS와 Extjs에 대해 잘 알지 못하며, 제 친구가 저에게 진짜 이유를 말해주길 원합니다.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.