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

Question

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

在行 itemclick 上，我需要更改网格圆背景颜色。

我尝试了以下方法，但只有 select 第一行的圆圈。

     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

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

Answer 1

Select 行中的子元素：

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

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

change circle background color within grid tpl on itemclick

javascript

css

extjs

extjs5