更改网格内的圆形背景色tpl on itemclick

问题描述:

我的网格在每一行都有一个圆圈。更改网格内的圆形背景色tpl on itemclick

在行itemclick我需要更改网格圈的背景颜色。

我试过以下,但只选择第一行的圆圈。

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

     } 
    } 

小提琴:

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

另一种选择是使用隐藏的单选按钮,然后选择它的项目单击,这反过来又触发改变圆圈背景颜色的事件,但这一选择似乎更复杂......

选择从该行的子元素:

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