Sencha touch html div 탭 리스너

Question

나는 Sencha Touch 응용 프로그램을 작성 중입니다. 나는 패널에서 확장 전망을

컨트롤러에서

Ext.define('MyApp.view.home', { extend : 'Ext.Panel', xtype : 'homeGrid', config : { scrollable: 'vertical', width: '100%', height: '100%', html : '<div></div>' } }); 

, 나는 서버에서 일부 데이터를 읽은 후, 동적으로이 패널에 항목을 추가하고 뷰 :

컨트롤러 있음

var homeGrid = this.getHomeGrid(); 
var htmlString = '<ul class="myGrid">'; 
       htmlString = htmlString + '\ 
               <li>\ 
                <div class="gridItem" id="item1">\ 
                 <div class="gridIcon">\ 
                  <img class="gridIconImage" src="myIcon.png"/>\ 
                 </div>\ 
                 <div class="gridItemName">\ 
                   Item 2\ 
                 </div>\ 
               </li>\ 
               <li>\ 
                <div class="gridItem" id="item2">\ 
                 <div class="gridIcon">\ 
                  <img class="gridIconImage" src="myIcon.png"/>\ 
                 </div>\ 
                 <div class="gridItemName">\ 
                   Item 1\ 
                 </div>\ 
               </li>\ 
               <li>\ 
                <div class="gridItem" id="item3">\ 
                 <div class="gridIcon">\ 
                  <img class="gridIconImage" src="myIcon.png"/>\ 
                 </div>\ 
                 <div class="gridItemName">\ 
                   Item 3\ 
                 </div>\ 
               </li>\ 
               '</ul>';   

      homeGrid.add({ 
       xtype: 'panel', 
       html : htmlString 
      }); 

기본적으로 나는 m 문자열을 연결하고 생성 된 HTML을 사용하여 원본에 새 패널 항목을 추가합니다.

지금까지는 괜찮습니다.

이제 gridItem div에 탭 (클릭) 리스너를 추가해야합니다. 사용자가 gridItem 중 하나를 클릭하면 div가있는 ID로 알림을 표시해야합니다.

어떻게하면됩니까?

는 내가 "의 GridItem"클래스를 참조 컨트롤 추가하려고 :

config: { 
    refs: { 
     homeGrid: 'emergencyGrid', 
     gridItem: '.gridItem' 
    }, 

    control: { 
     '.gridItem': { 
      tap: 'onGridItem' 
     } 
    } 

을하지만 탭 때 onGridItem는 호출되지 않습니다.

컨트롤을 초기화 한 후에 div를 동적으로 추가한다는 것이 문제라고 생각합니다. 패널 안에 div를 삽입 한 후 탭 수신기를 추가하는 방법이 있습니까?

감사합니다 도움이

Answer 1

당신은 homeGrid의 요소 또는 패널 자체에 활용할 듣고 시도 할 수 있습니다에 대한 많은. 이벤트 핸들러 내에서 이벤트 객체를 사용하여 대상 HTML 요소를 찾을 수 있으며이를 바탕으로 모든 것을 트리거 할 수 있습니다.

Ext.getCmp('#homeGrid').element.on({ 
    scope: this, 
    tap: 'onPanelTap' 
}); 

및 방법에서이 같은 수행 할 수 있습니다 : 예를 들어, 당신이 원하는 때마다 당신은 다음과 같이 뷰 클래스에 리스너를 추가 할 수 있습니다이 무엇입니까

onPanelTap : function(evt){ 
    var element = Ext.get(evt.target); 
    //console.log(evt, element); 
    var parentSpan = element.parent('.gridItem'); 
    if(!parentSpan){ 
     return false; 
    } 
    var id = parentSpan.getAttribute('id'); 
    if(element.hasCls('gridIcon')){ 
     console.log("Icon tapped for "+id); 
    } else if(element.hasCls('gridItemName')){ 
     console.log("Name tapped for "+id); 
    } 
}