2013-06-18 1 views
0

몇 가지보기가있는 테스트 응용 프로그램이 있습니다. 내 버튼에 간단한 '탭'수신기를 호출하려고합니다. 컨트롤러가 인스턴스화되어 실행 되더라도 탭 이벤트는 시작되지 않습니다. 컨트롤러Sencha Tap Listener가 실행되지 않습니다.

Ext.define('MyApp.controller.Main', { 
    extend: 'Ext.app.Controller', 
    requires: [ 
     'MyApp.view.Main' 
    ], 
    init: function(){ 
     // download and parse data from server here. 
     console.log('controller initiated!'); 
    }, 
    config: { 
     refs: { 
      loginBtn: 'button[action=login]' 
     }, 
     control: { 
      loginBtn: { 
       tap: 'loginBtnHandler' 
      } 
     } 
    }, 
    loginBtnHandler: function(){ 
     this.callParent(arguments); 
     Ext.Msg.alert('here'); 
    } 
}); 

Main.js - -

은 여기 내 app.js

Ext.application({ 
    name: 'MyApp', 

    requires: [ 
     'Ext.MessageBox', 
     'Ext.form.FormPanel', 
     'Ext.navigation.View' 
    ], 

    views: [ 
     'Main', 
     'Tasks' 
    ], 

    controllers: [ 
     'Main' 
    ], 

    models: [ 
     'Task', 
     'Schedule' 
    ], 

    stores: [ 
     'Tasks', 
     'Schedules' 
    ], 

    launch: function() { 
     // Destroy the #appLoadingIndicator element 
     try{ 
      Ext.fly('appLoadingIndicator').destroy(); 
     }catch(err){ 
      console.warn("[CUSTOMWARN]Could not destroy loading indicator because of -- \n"+err); 
     } 

     var DEBUG=false; 
     if(!DEBUG){ 
      // Initialize the main view 
      Ext.Viewport.add(Ext.create('MyApp.view.Main')); 
     } 
    } 
}); 

Main.js의보기

Ext.define('MyApp.view.Main', { 
    extend: 'Ext.navigation.View', 
    alias: 'customnavigationview', 
    requires: [ 
     'MyApp.form.Login' 
    ], 
    config: { 
     navigationBar: { 
      hidden: true 
     }, 
     items: [ 
      { 
       xtype: 'logincard', 
       flex: 1 
      } 
     ],   
    } 
}); 

Login.js - 위해 xtype을 위해 : 'logincard'

Ext.define('MyApp.form.Login', { 
    extend: 'Ext.form.Panel', 
    xtype: 'logincard', 
    requires: [ 
     'Ext.field.Password', 
     'Ext.field.Email', 
     'Ext.form.FieldSet', 
     'Ext.field.Toggle', 
     'Ext.Label' 
    ], 
    // id: 'loginForm', 
    config: { 
     items: [ 
      { 

       xtype   : 'label', 
       html   : 'Login failed. Please enter correct credentials.', 
       itemId  : 'signInFailedLabel', 
       hidden  : true, 
       hideAnimation : 'fadeOut', 
       showAnimation : 'fadeIn', 
       style   : 'color:#990000;', 
       margin  : 10 
      }, 
      { 
       title: 'Please log in', 
       xtype: 'fieldset', 
       items:[ 
        { 
         xtype: 'textfield', 
         name : 'username', 
         label: 'UserName' 
        }, 
        { 
         xtype: 'passwordfield', 
         name : 'password', 
         label: 'Password' 
        } 
       ] 
      }, 
      { 
       xtype: 'fieldset', 
       items: [ 
        {     
         xtype : 'togglefield', 
         name : 'rememberLogin', 
         label : 'Remember Me ' 
        } 
       ] 
      }, 
      { 
       xtype : 'button', 
       id  : 'loginSubmitBtn', 
       itemId : 'loginSubmitItemBtn', 
       text  : 'Login', 
       ui  : 'action', 
       action : 'login', 
       margin : 10 
      } 
     ] 
    } 
}); 

도움이 매우 감사하겠습니다!

편집 : 그래서 Ext.ComponentQuery.query("#loginSubmitBtn")을 사용하고 콘솔에서 출력물을 인쇄 할 때 정확한 버튼을 가리키는 것을 볼 수 있습니다. 다음은 결과입니다.

0: Class 
_badgeCls: "x-badge" 
_baseCls: "x-button" 
_disabledCls: "x-item-disabled" 
_floatingCls: "x-floating" 
_hasBadgeCls: "x-hasbadge" 
_hiddenCls: "x-item-hidden" 
_icon: false 
_iconAlign: "left" 
_itemId: "loginSubmitItemBtn" 
_labelCls: "x-button-label" 
_margin: 10 
_pressedCls: "x-button-pressing" 
_pressedDelay: 0 
_styleHtmlCls: "x-html" 
_text: "Login" 
_ui: "action" 
action: "login" 
badgeElement: Class 
bodyElement: Class 
config: objectClass 
currentUi: "x-button-action" 
element: Class 
eventDispatcher: Class 
getEventDispatcher: function() { 
getId: function() { 
getObservableId: function() { 
getUniqueId: function() { 
iconElement: Class 
id: "loginSubmitBtn" 
initConfig: function(){} 
initialConfig: Object 
initialized: true 
innerElement: Class 
managedListeners: Object 
observableId: "#loginSubmitBtn" 
onInitializedListeners: Array[0] 
parent: Class 
referenceList: Array[4] 
refreshFloating: function() { 
refreshSizeState: function() { 
renderElement: Class 
rendered: true 
textElement: Class 
usedSelectors: Array[1] 
__proto__: Object 
length: 1 

** EDIT 3 : ** 찾았습니다! 여기에 대답을 참조하십시오 : Sencha Tap listener not firing

+0

콘솔에 오류가 없습니까? –

+0

아무것도, 미안 해요! – javaCity

답변

0

좋아,이 이상한,하지만 내 buttonclick가 제대로 처리되지 않는 이유를 나는 발견했다. 나는 보통 웹 검사기를 켜고 테스트 브라우저로 Google 크롬을 사용합니다. Safari를 다운로드하고 동일한 코드를 사용해 보았습니다. 나는 두 브라우저를 모두 보았고, 유일한 차이점은 Chrome에서 웹 검사기를 사용했지만 Safari는 그렇지 못했다는 점이었습니다. Chrome에서 웹 속성을 닫았으며 버튼 핸들러가 훌륭하게 작동했습니다 (다시로드하지 않음). 브라우저를 다시 시작하고 검사기를 별도의 창으로 밀어 넣었습니다. 아무도 작동하지 않았습니다. 그러나 사파리는 검사관과 함께해도 훌륭하게 작동합니다. Chrome 버그일까요?

Google 크롬 버전 : 27.0.1453.110

* 편집 : * 나는 웹 관리자의 설정 터치 에뮬레이션을했다. 이 기능을 켜면 등록 할 터치 이벤트에 대한 웹 관리자를 닫아야합니다. 그렇지 않으면 웹 속성이 열려있는 동안 터치 에뮬레이션을 해제하여 이벤트에 등록해야합니다.

TL : DR : 터치 에뮬레이션을 사용하도록 설정 한 경우 테스트하기 전에 Chrome에서 웹 속성을 닫습니다.

1

버튼 탭에 대한 리스너를 대신 'itemtap'

tap: 'loginBtnHandler' 

은 내가이 문제에 했어 생각이

+0

내 잘못입니다. 처음에는 '꼭지'였습니다. 내 질문을 편집했습니다. – javaCity

+0

좋습니다. 레퍼런스 선택기가 올바른 항목을 찾았습니까? loginBtn : '버튼 [작업 = 로그인]'. 나는 확실히 itemId 접근법으로 갈 것입니다. –

+0

그냥 대체 : loginBtn : '단추 [조치 = 로그인]'예 : loginBtn : 'logincard #loginSubmitItemBtn' –

1

을 helps- 희망의 단지 '탭'해야 과거. 최고는 아니

loginBtn: 'logincard button[action=login]' 
+0

도이 문제를 해결했습니다 ... 불행히도이 방법은 효과가 없습니다. 문제를 줄이기 위해 사용할 수있는 디버깅 프로세스가 있습니까? (죄송합니다, 저는 Sencha Touch를 처음 사용합니다) – javaCity

+0

내 대답을 확인하십시오 : http://stackoverflow.com/a/17172747/1140134 결국 코드 문제가 아닌 것처럼 보입니다. – javaCity

1

,하지만 작동합니다 : 쿼리를 좁힐보기 이름으로 컨트롤러에 심판 자격 시도

먼저 컨트롤러의 탭 리스너를 제거합니다. 또한 버튼의 핸들러를 버튼의 '행동'속성을 제거하고 설정 :

{ 
    xtype : 'button', 
    id  : 'loginSubmitBtn', 
    itemId : 'loginSubmitItemBtn', 
    text  : 'Login', 
    ui  : 'action', 
    //action : 'login', 
    margin : 10, 
    handler : function() { 
     MyApp.app.getController('Main').loginBtnHandler() 
    } 
} 
+0

하지만이 작업은 MVC 패러다임을 깨뜨릴 수 있습니다. 귀하의 제안에 감사드립니다! – javaCity

+0

작업을 제거했습니다 : '로그인', 코드에 이 있습니다. –

+0

내 대답을 확인하십시오 : http://stackoverflow.com/a/17172747/1140134 제거 작업 : '로그인'여전히 ' 검사관과 함께 일하지 마라. – javaCity

관련 문제