更改网格内的圆形背景色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');