有一个非常基本的列表组件,但想要改变某些行的行颜色取决于一个值/我尝试设置一个tpl但它似乎没有工作.任何帮助,将不胜感激
Ext.create('Ext.dataview.List',{
id : 'mylist',store: myStore,tpl: new Ext.XTemplate(
'最佳答案
啊,基本错误,这就是你在代码中得到的::
原文链接：https://www.f2er.com/js/429483.html而这应该是它应该是:::
**注意您需要在实际比较的两个值之间添加三个“等于”符号.所以,如果你通常写
x=y
然后在一个模板中
x==y // (you basically add an extra equal)
所以像条件语句一样
x==y //when you're checking if the values are equal
变
x===y
编辑::为要填充的整个行添加编码,并指定背景颜色
注意::请创建一个单独的XTemplate对象,而不是内联tpl代码.这将使您充分发挥XTemplate的潜力,包括非常酷的成员函数！
试验1 ::
'//注意：我在助手函数中添加了我用来改变类的背景颜色.我的tpl,基本上在每个列表行使用替代颜色.因此,如果第一行是绿色,第二行是黄色,第三行是绿色,第四行是黄色,依此类推.
要添加的关联CSS(对于在li标签中选择的listClasses)
#meetingsList li.odd { background-color: #ebdde2; }
#meetingsList li.even { background-color: #fdeef4; }
#meetingsList li.odd { border-bottom: 1px solid #999; }
#meetingsList li.even { border-bottom-style: none; }
编辑试用2 ::要添加的新CSS
CSS
.testview .x-dataview-item { border-bottom : 1px solid #cccbcb; }
.testview .x-item-selected { background-color: #006bb6; background-image: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#50b7ff),color-stop(2%,#0080da),color-stop(100%,#005692) ); background-image: -webkit-linear-gradient(#50b7ff,#0080da 2%,#005692);
background-image: linear-gradient(#50b7ff,#005692);
color: #fff;;
text-shadow: rgba(0,0.5) 0 -0.08em 0;
border-color: #103656; }
{
xtype : 'list'
. . . .
cls : 'testview'
}
