Comment ajouter un bouton à un tpl

Question

Je ne sais pas si c'est possible mais j'ai une application qui ne fait pas ce que je veux. D'abord, il affiche une liste de restaurants à partir d'une base de données dans un panneau.

tpl: [ 
    '<tpl for=".">', 
     '<div="my_div"><h2>{restaurant_name}</h2></div>', 
    '</tpl>' 
] 

Cela fonctionne correctement et me donne une liste de mes restaurants. Maintenant vient la question. Je veux ajouter un bouton pour que "my_div" clique sur un autre panneau. Je peux le faire avec un objet amarré mais cette idée ne marchera pas puisque vous pouvez cliquer sur n'importe quel restaurant et obtenir leurs informations.

Je suppose que j'aurais besoin d'appeler en quelque sorte un gestionnaire d'événements (que je peux travailler à partir d'un élément ancré). Je suis fondamentalement bloqué sur comment ajouter un bouton à un modèle, et l'aide de sencha est inutile sur ce sujet.

Je gestionnaires d'événements qui ressemblent à ceci:

var restaurantListHandler = function(button,event){ 
    mainPanel.setActiveItem(restaurantList, {type: 'slide', direction: 'right'}); 
} 

Merci

Eric

Answer 1

Peut-être que vous pouvez utiliser quelque chose comme:

onclick="javascript:selectRestaurant(\'{Id}\');" 

sur la div ou (ce qui Je l'ai fait une fois) sur une image et avoir une fonction globale selectRestaurant.
Id serait alors un champ de base de données qui identifie de façon unique le restaurant.

Answer 2

Si je comprends bien, vous êtes à la recherche:

1. un bouton à ajouter à votre modèle
2. un gestionnaire d'événements à être lié à ce bouton qui est différent de celui de votre autre les éléments de la liste sont liés à
3. le bouton doit figurer dans la liste elle-même; il ne peut pas être une pièce séparée
4. de gestionnaire d'événements de la touche doit de l'acheminer vers une nouvelle page, plutôt que l'action des autres éléments de la liste qui sont ses frères et sœurs

Est-ce tout cela est vrai?

Si oui, j'introduirais une condition dans votre gestionnaire d'événements de liste qui vérifiera une classe ou un ID sur l'élément (selon la plus facile/la plus légère) et, en la trouvant, prendra une autre action, par exemple, allez à la page suivante. Un peu comme jQuery.live() ou d'autres délégués. Faites-moi savoir si vous avez besoin de moi pour élaborer.

Si non, je dirais jeter un oeil à mon numéro 3; Est-ce que le bouton doit absolument être dans la liste? Si c'est associé à chaque article, alors nous ferions une chose, mais sinon, nous voudrions en faire une autre. Je dois donc le savoir avant de pouvoir répondre pleinement. Si cela doit être là, voir ci-dessus. Si cela ne doit pas figurer dans la liste, je la retirerais de la liste et la déclarerais comme un nouveau composant. De là, vous devriez être en mesure de spécifier un gestionnaire dans la configuration, comme

items: { xtype: 'button', handler: goAwesomePlaces } 

où goAwesomePlaces est votre gestionnaire.

Answer 3

Vous pouvez utiliser l'option onItemDisclosure de Ext.Liste:

http://docs.sencha.com/touch/1-1/#!/api/Ext.List-cfg-onItemDisclosure

Une démo est au Sencha tactile évier de cuisine sous l'interface utilisateur/Liste/Divulgation:

http://dev.sencha.com/deploy/touch/examples/kitchensink/

var serviceList = new Ext.List({ 
      id: 'servicelist', 
      blockRefresh: true, 
      pinHeaders: false, 
      itemTpl: serviceTemplate, 
      grouped: true, 
      indexBar: false, 
      singleSelect: true, 
      allowDeselect: false, 
      showAnimation: 'slide', 
      store: serviceStore, 
      emptyText: L10N[lang].msg.no_services, 
      multiSelect: false, 
      itemCls: 'servicemain', 
      cls: 'background', 
      onItemDisclosure: function(record, btn, index) { 
      Ext.Msg.alert('Service', 'Name: ' + record.get('service'), Ext.emptyFn); 
     } 
    }); 

Answer 4

Si vous souhaitez quelque chose comme: liste avec un bouton sur chaque article. alors voici ma mise en œuvre de la même

var asListItemTpl = new Ext.XTemplate(
           '<tpl for=".">', 
           '<div class="sb-section-title">{label}</div>', 
           '<div class="as-button"><input type="button" id="btn{id}" value="btn{id}" width="12px"> </div>', 
           '</tpl>' 
          ); 

Espérons que cela a du sens.