在itemclick上更改网格tpl中的圆圈背景颜色

Question

我的网格在每一行都有一个圆圈。

在行上单击项目我需要更改网格圆背景颜色。

我尝试了以下操作，但只选择了第一行的圆圈。

     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

另一种选择是使用隐藏的单选按钮并在ItemClick上选择它，这又会触发一个改变圆形背景颜色的事件，但这个选项似乎更复杂......

Answer 1

从行中选择子元素：

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