2013-07-16 2 views
1

필수 '나는이 문제를 종일 종일 다루고 있었고 창 밖으로 뛰어 내리고있었습니다.'Sencha는 Ext.Panel의 '스크롤 가능한'속성을 동적으로 설정합니다.

나는 Sencha Touch 2 응용 프로그램을 작성 중입니다. 현재 뷰에서는 요소 내에서 클릭하고 드래그하는 동안 스크롤하는 기능을 사용하지 않으려합니다. 이 요소는 그리는 캔버스이므로 그리는 동안 페이지가 위아래로 움직이는 것을 원치 않습니다.

나를 곰, 나는 꽤 Sencha에 새로운 있습니다.

여기에 코드의 기본 개요입니다 :

지금 여기에 내가 시도하는 일이
Ext.define('App.view.Canvas', { 
    extend: "Ext.Panel", 
    id: "panel", 
    alias: "widget.canvas", 
    requires: ['Ext.ux.Fileup'], 

    config: { 
     styleHtmlContent: true, 
     scrollable: true, 
     tpl:"<!-- a bunch of html -->"+ 
       "<div id='canvasDiv'></div>"+ 
      "<!-- more html -->", 

     items: [{ 
      xtype: "toolbar", 
      title: "Canvas", 
      docked: "top", 
     }], 

     listeners: [{ 
      some listeners 
     }, { 
      event: "show", 
      fn: "onShow", 
     }], 
    }, 

    onShow: function() { 

     // where I am trying to change the scrollable bit 

    }, 
}); 

:

나는 JQuery와 ExtJS로 혼합하고 있기 때문에이 하나가 작동하지 않습니다 생각 .. . 그것은 적시에 화재 표시하지만,이 에러 :

처리되지 않는 오류 : 개체 [개체 개체] 어떠한 방법 'setScrollable'

onShow: function() { 
// #canvasSignature is the id of the canvas that is loaded in the controller and placed in #canvasDiv 
$("#canvasSignature").mousedown(function() { 
       Ext.get('panel').setScrollable(false); //attempting to reference panel 
      }).bind('mouseup mouseleave', function() { 
       Ext.get('panel').setScrollable(true); //attempting to reference panel 
      }); 
} 
,745가 없다

그런 다음이 시도하지만, 콘솔 오류에 따라 (형식 오류 : 정의되지 않은 재산 'FN'을 읽을 수 없습니다) 나는 GET()

onShow: function() { 
    Ext.get("canvasSignature").on({ 
        dragstart: Ext.get('panel').setScrollable(false), 
        dragend: Ext.get('panel').setScrollable(true), 
       }); 
}, 

나는를 사용하고있는 방법에 문제가 있다고 생각 기본 해법을 충족 시키려면 다른 해킹 ('mousedown'중 모든 것을 고정 위치로 설정하는 몇 가지 방법)이 필요합니다. 하루가 끝나면 사용자가 #canvasSignature 요소 내에서 손가락을 드래그하는 동안 화면이 움직이지 않아야합니다.

미리 감사드립니다.

답변

1

Sencha 구성 요소 대신 DOM 요소를 반환하는 Ext.get()을 사용하는 대신 setScrollable()의 뷰 자체를 참조하는 것이 좋습니다.

onShow: function() { 
    var me = this; 
    // #canvasSignature is the id of the canvas that is loaded in the controller and placed in #canvasDiv 
    $("#canvasSignature").mousedown(function() { 
     me.setScrollable(false); //attempting to reference panel 
    }).bind('mouseup mouseleave', function() { 
     me.setScrollable(true); //attempting to reference panel 
    }); 
} 

은 또한 오히려 수신기를 부착 할 필요가보다 Panelinitialize() 메소드를 오버라이드 (override) 할 수있다.

initialize: function() { 
    this.callParent(arguments); 

    var me = this; 
    // #canvasSignature is the id of the canvas that is loaded in the controller and placed in #canvasDiv 
    $("#canvasSignature").mousedown(function() { 
     me.setScrollable(false); //attempting to reference panel 
    }).bind('mouseup mouseleave', function() { 
     me.setScrollable(true); //attempting to reference panel 
    }); 
} 
+0

멋지게 작동합니다. 고마워, 제프 피트, 니가 사장이야. – poff

+0

다른 말로 jQuery를 필요로하지 않는다면 여기에서했던 것처럼 함수를 호출했을 때 두 번째 호출이 작동했을 수도 있습니다. 그것이 jQuery를 사용하고 있다면,이 경로를 제거하고이 경로로가는 것이 도움이 될 수 있습니다. – jprofitt

+0

다른 몇 곳에서 jQuery를 사용합니다. 그러나 extjs를 조금 더 살펴보고 모든 jQuery를 대체 할 수 없는지 살펴 보겠습니다. 고맙습니다! – poff