Sencha Touch 1.1のExt.Listのカスタム要素にリスナーを追加

Question

-/+ボタンでリストを作成しようとしています。リストの各項目には、この2つのボタンがあります。私はボタン要素（実際にはDivs）にリスナーを追加しようとしていますが、これまでのところ最低限の運勢でした。

私がこれまでにやったことは、リストの「 beforerender」イベントをキャッチするすべてのリストの要素をループし、リスト上の各項目についてクリックリスナーを追加しています。しかし、問題は、別の画面/パネルとリストの背面にナビゲートすると、の前にイベントがスローされないことです。したがって、新しいリストアイテムのリスナーは登録されません。

私は回避策を作り、は、パネルの各「beforeactivate」 'イベントでのをリフレッシュするリストを強制しようとしました。しかしこれにより、リストは4-5回更新されます（理由は分かりません）。

私は間違った方法でこれを行う必要があります...おそらく解決策はカスタムコンポーネントですが、カスタムコンポーネントのドキュメントは非常に貧弱です。

Answer 1

[OK]を、私は誰もが同じ問題を持つために、解決策を見つけた：

私はパネルのactivateとbeforeactivateイベントをキャッチし、私は、リスト上のIDを使用して、リストへの参照を取得し、 （例：lstProducts）、それからthis.down('#productsList');で取得してください。ここで

UPDATE

はリストとリスナーをセットアップする方法と一緒に、リストのテンプレートです。

リスト

productsTemplate = new Ext.XTemplate(
      '<tpl for=".">' + 
       '<table width="100%" cellpadding="0" cellspacing="0"><tr>' + 
       '<td>' + 
       '<div class="product">{Name}</div>' + 
       '</td>' + 
       '<td rowspan="2" width="10%" align="right">' + 
       '<table cellpadding="0" cellspacing="0">' + 
       '<tr><td><div class="btn btnOrder minus" id="btnRemove{#}" > - </div></td> ' + 
       '<td><input type="text" disabled id="pr-{Id}" value="0" class="productQuantity"/> </td>' + 
       '<td><div class="btn btnOrder plus" id="btnAdd{#}"> + </div></td></tr></table> ' + 
       '</td></tr><tr><td>' + 
       '<table class="orderExtra"><tr>' + 
       '<td class="sideOrderIcon" id="prSideOrderIcon-{Id}">&nbsp;</td>' + 
       '<td valign="middle"><input type="text" disabled id="prSideOrder-{Id}" value="0" class="extraQuantity"/></td>' + 
       '<td class="extraIcon" id="prExtraIcon-{Id}">&nbsp;</td>' + 
       '<td><input type="text" disabled id="prExtra-{Id}" value="0" class="extraQuantity"/></td>' + 
       '<td class="price">{Price} €</td>' + 
       '</tr></table>' + 
       '</td></tr>' + 
       '</table>' + 
       '</tpl>' 
     ); 

リスト自体とビューのアクティブ化でアクションリスナーのセットアップのためのテンプレート。

productsList = new Ext.List({ 
      store:this.store, 
      scope:this, 
      refreshed:false, 
      id:'productsList', 
      disableSelection:true, 
      itemTpl:productsTemplate }) 

Ext.apply(this, { 
      layout:'fit', 
      scroll:'vertical', 
      items:[productsList], 
      listeners:{ 
       activate:this.setupQuantityActionListeners 
      } 

コードの他の部分では、以下の方法を使用します。

setupQuantityActionListeners:function() { 
    var panel = this.down('#productsList'); 
    // loop all the list items to add listeners to the buttons 
    panel.all.elements.forEach(function (item, index) { 
     //get the button references 
     var btnAdd = Ext.get('btnAdd' + (index + 1)); 
     var btnRemove = Ext.get('btnRemove' + (index + 1)); 
     //get the product model 
     var product = app.stores.Products.getAt(index); 
     var tbxQuantity = Ext.get('pr-' + product.data.Id); 
     //get the running quantity 
     if (tbxQuantity) 
      var quantity = tbxQuantity.getValue(); 
     //add - remove quantity 
     if (btnAdd) { 
      btnAdd.on('click', function() { 
       tbxQuantity.dom.value = ++quantity; 
       Ext.dispatch({ 
        controller:'Orders', 
        action:'addOrderItem', 
        product:product, 
        quantity:quantity 
       }) 
      }) 
     } 
     if (btnRemove) { 
      btnRemove.on('click', function() { 
       if (quantity > 0) { 
        tbxQuantity.dom.value = --quantity; 
        Ext.dispatch({ 
         controller:'Orders', 
         action:'addOrderItem', 
         product:product, 
         quantity:quantity 
        }) 
       } 
      }) 
     } 
    }); 
} 

一般的なスコープには十分注意してください。ビューから何かを取得して、コンポーネント・リスナー・メソッドで取得しようとする場合は、コンポーネントのリスナー・メソッド内にあるときにビューの参照を取得するために、そのコンポーネントにscope:thisを設定する必要があります。

はそれが私は煎茶で新しいですし、私はあなたが私にitem.Iは感謝するでしょうリストにボタンを追加し、コードを送信above.Mayを説明し、正確に何をする必要が