sencha-touch - 突出显示 ComponentView 中的选定行？

Question

我正在使用这个 ComponentView 示例： Kitten ComponentView

在我的变体中，我想在用户点击它时突出显示选定的行，就像在xtype: 'list'. 我怎样才能做到这一点？

Answer 1

您可以通过使用tpl属性来实现这一点，然后在标签class内设置 css<div>

像这样的东西，

....
xtype: 'list',
tpl: '<div class="clickedItem"> ...'
....

然后将您的css代码编写为，

.clickedItem{
   background: // some color value;
   text-shadow: // some color value;
}

Answer 2

在他们的示例目录中检查Sencha Kiva 示例后，它看起来像是 .x-dataview-UI_NAME 类与 .x-list-item 的组合，其中 UI_NAME 定义为 dataview 视图配置。在 Kiva 示例中，它是行 ' ui: loan '。所以，CSS 部分看起来像这样：

.x-dataview-贷款.x-list-item {
 ...
}

在视图中定义 UI 后缀：

Ext.define('Kiva.view.LoansList', {
    扩展：'Ext.DataView'，
    xtype : '贷款清单',
    要求：[
        'Kiva.view.LoansListItem'
    ],

    配置：{
        ui : '贷款',
        商店：“贷款”，
        使用组件：真，
        defaultType: 'loanslistitem',
        取消选择容器点击：假
    },

    onItemTap：函数（容器，目标，索引，e）{
        变我=这个；
        me.callParent（参数）；// 警告：没有这个调用，该行将不会被选中
    }

application.css 中的相关代码

.x-dataview-贷款 .x-img {
    右边距：1em；
    背景位置：中心中心；
    宽度：60px；
    高度：60 像素
}

.x-dataview-loans .x-list-item {
    填充：1em；
    边框底部：1px 实心#e1e1e1；
    -webkit-transition：线性 .2s 背景
}

.x-dataview-loans .x-list-item .name div {
    字体粗细：粗体
}

.x-dataview-loans .x-item-selected {
    背景：#fff
}

.x-dataview-loans .completion {
    显示：-webkit-box；
    展示：盒子；
    -webkit-box-align：居中；
    框对齐：居中
}

.x-dataview-loans .完成 .x-innerhtml {
    显示：-webkit-box；
    展示：盒子；
    -webkit-box-align：拉伸；
    框对齐：拉伸；
    高度：1em；
    宽度：100%；
    边框：1px 实心#bbb；
    -webkit-box-shadow: 插图 0 0 1px #fff;
    填充：1px；
    -webkit-border-radius：1em；
    边界半径：1em；
    背景颜色：#e2e2e2；
    背景图像：-webkit-渐变（线性，50% 0%，50% 100%，颜色停止（0%，#c9c9c9），颜色停止（10%，#d5d5d5），颜色停止（65%， #e2e2e2), 颜色停止(100%, #e3e3e3));
    背景图像：-webkit-线性渐变（#c9c9c9，#d5d5d5 10%，#e2e2e2 65%，#e3e3e3）；
    背景图像：线性渐变（#c9c9c9，#d5d5d5 10%，#e2e2e2 65%，#e3e3e3）
}

.x-dataview-loans .completion .x-innerhtml .bar {
    最小宽度：1em；
    边框：1px 实心#4b9123；
    -webkit-border-radius：1em；
    边界半径：1em；
    背景颜色：#74b446；
    背景图像：-webkit-渐变（线性，50% 0%，50% 100%，颜色停止（0%，#c6e1b2），颜色停止（2%，#87c05e），颜色停止（100%， #639a3c));
    背景图像：-webkit-linear-gradient(#c6e1b2, #87c05e 2%, #639a3c);
    背景图像：线性渐变（#c6e1b2，#87c05e 2%，#639a3c）
}