change circle background color innerhalb des Rasters tpl on itemclick

Question

Mein Raster hat in jeder Zeile einen Kreis.

In Zeile itemclick muss ich die Rasterkreishintergrundfarbe ändern.

Ich habe Folgendes versucht, aber wählt nur den Kreis der ersten Zeile.

 tpl: [ 
     '<tpl for=".">', 

       '<span class="circle"></span>', 

       //'<input class="radio" id="radioZ" name="radio" type="radio" unchecked>', 
       '<div style="float: left; width: 90%; padding:0px;">', 
        '<div style=" padding: 10px 7px 2px 7px;"><b>{name}</b></div>', 
        '<div style=" padding: 10px 7px 2px 7px;">{email}</div>', 
       '</div>', 
     '</tpl>' 
     ] 
    }], 

    listeners:{ 
     itemclick: function(grid, record, item, index, e, eOpts){ 
      var dom = Ext.dom.Query.select('.circle'); 
      var el = Ext.get(dom[0]); 
      el.applyStyles({'background-color':"red"}); 

     } 
    } 

Fiddle:

https://fiddle.sencha.com/#fiddle/1btk

Eine weitere Option ist ein verstecktes Radio-Button zu verwenden, und wählen Sie sie auf ItemClick, was wiederum ein Ereignis auslöst, die den Kreis Hintergrundfarbe ändert sich, aber diese Option scheint kompliziertere ...

Answer 1

das Element Kind Wählen Sie aus der Reihe:

Ext.fly(item).down('.circle').setStyle('background-color', 'red');