1

私は煎茶タッチアプリケーションに取り組んでいます。パネルから広がるビューがあります

景色

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
            });

基本的に、連結された文字列から html を生成し、生成された HTML を使用して新しいパネル項目を元のパネルに追加するだけです。

今までアルは正常に動作します。

ここで、タップ (クリック) リスナーを gridItem div に追加する必要があります。ユーザーが gridItems の 1 つをクリックすると、div の ID が記録されたアラートを表示する必要があります。

どうやってやるの？

「gridItem」クラスを参照するコントロールを追加しようとしました:

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

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

しかし、タップしても onGridItem が呼び出されることはありません。

問題は、コントロールを初期化した後に div を動的に追加していることだと思います。パネル内に div を挿入した後にタップ リスナーを追加する方法はありますか?

助けてくれてありがとう

4

1 に答える 1

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);
    }
}
于 2013-05-20T12:56:56.107 に答える