0
Sencha 프레임 작업을 사용하여 하이브리드 응용 프로그램을 만듭니다. 설정 화면이 화면에 표시 될 때 사용자의 모든 터치 이벤트를 방지하려는 경우 특정보기를 제외한 구성 요소 stopProgation() 및 preventDefault() 이벤트를 추가로 게시하는 게시물의 일부를 보았습니다. 그러나 나는 그것에 대해 명확하지 않습니다.클릭 이벤트를 문서에서 하위 요소로 옮깁니다
클릭 이벤트를 문서에 추가하여 사용자가 화면을 탭하면 뷰에서 설정 목록을 해제하려고했지만 사용자가 해당 화면의 다른 구성 요소를 누르면 해당 버튼 동작도 트리거됩니다.
또한 사용자가 내 설정에서 설정 목록이나 특정 구성 요소를 클릭 할 때 터치 동작을 방지하고 싶지 않습니다.
주 : 성능 문제가 발생할 수 있습니다 Sencha에 의해 jquery 측면을 사용하기 때문에 내가 할 수없는이 프로젝트에 jquery를 사용합니다.
코드 :
Ext.define('MyApp.view.ControlPanel.ControlPanel', {
extend: 'Ext.Container',
alias: "widget.controlpanel",
requires: [
'Ext.SegmentedButton'
],
config: {
layout: {
pack:'stretch'
},
docked:'bottom'
},
documentClickHandler:function(event){
console.log('Document Clicked');
document.removeEventListener('click', arguments.callee, false);
var settingListContainer = Ext.ComponentQuery.query("#setting-list-container")[0];
if (settingListContainer) {
var controlpanel = settingListContainer.up('controlpanel');
if (controlpanel) {
controlpanel.remove(settingListContainer, true);
var segmentButton = controlpanel.down("#control-segment-button");
if (segmentButton) {
segmentButton.setPressedButtons();
}
}
}
event.preventDefault();
return false;;
},
onSegmentToggled: function (container, button, pressed)
{
console.log("Toggle Event");
var index = container.getItems().indexOf(button);
if (index == 0) {
if (pressed) {
container.setPressedButtons();
var settingListContainer = this.down("#setting-list-container");
if (settingListContainer) {
this.remove(settingListContainer, true);
// close nav by touching the partial off-screen content
}
}
}a
else {
var settingListContainer = this.down("#setting-list-container");
if (!pressed&&settingListContainer) {
this.remove(settingListContainer, true);
}
else if (pressed) {
var existingList = Ext.ComponentQuery.query('settingList')[0];
if (existingList) {
this.add(existingList);
document.addEventListener('click', this.documentClickHandler, false);
}
else {
this.add({ xtype: "settingList", height: '349px', sortHandler: this.config.sortHandler, segmentControl: container });
document.addEventListener('click',this.documentClickHandler, false);
}
}
}
},
listeners: [
{
delegate: "#control-segment-button",
event: 'toggle',
fn: 'onSegmentToggled'
}
],
initialize: function() {
//Ext.require("");
var segmentedButton = Ext.create('Ext.SegmentedButton', {
layout: {
type: 'hbox',
pack: 'center',
align: 'stretchmax'
},
docked: 'bottom',
id:'control-segment-button',
allowMultiple: false,
allowDepress: true,
config: { flex: 1 },
items: [
{
iconCls: 'time',
width: '50%',
cls:'palin-segment',
style:"border-radius:0px"
},
{
iconCls: 'settings',
width: '50%',
cls: 'palin-segment',
style: "border-radius:0px"
}
]
});
this.add(segmentedButton);
}
});