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 example后，看起来它是.x-dataview-UI_NAME类与.x-list-item的组合，其中定义的UI_NAME是dataview视图配置。在Kiva示例中，它是“ ui：loan ”行。因此，CSS部分看起来像这样：

.x-dataview-loans .x-list-item {
 ...
}

在视图中定义UI后缀：

Ext.define('Kiva.view.LoansList', {
    extend: 'Ext.DataView',
    xtype : 'loanslist',
    requires: [
        'Kiva.view.LoansListItem'
    ],

    config: {
        ui   : 'loans',
        store: 'Loans',
        useComponents: true,
        defaultType: 'loanslistitem',
        deselectOnContainerClick: false
    },

    onItemTap: function(container, target, index, e) {
        var me = this;
        me.callParent(arguments);  // WARNING: without this call, the row will not become selected
    }

application.css中的相关代码

.x-dataview-loans .x-img {
    margin-right: 1em;
    background-position: center center;
    width: 60px;
    height: 60px
}

.x-dataview-loans .x-list-item {
    padding: 1em;
    border-bottom: 1px solid #e1e1e1;
    -webkit-transition: linear .2s background
}

.x-dataview-loans .x-list-item .name div {
    font-weight: bold
}

.x-dataview-loans .x-item-selected {
    background: #fff
}

.x-dataview-loans .completion {
    display: -webkit-box;
    display: box;
    -webkit-box-align: center;
    box-align: center
}

.x-dataview-loans .completion .x-innerhtml {
    display: -webkit-box;
    display: box;
    -webkit-box-align: stretch;
    box-align: stretch;
    height: 1em;
    width: 100%;
    border: 1px solid #bbb;
    -webkit-box-shadow: inset 0 0 1px #fff;
    padding: 1px;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    background-color: #e2e2e2;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c9c9c9), color-stop(10%, #d5d5d5), color-stop(65%, #e2e2e2), color-stop(100%, #e3e3e3));
    background-image: -webkit-linear-gradient(#c9c9c9, #d5d5d5 10%, #e2e2e2 65%, #e3e3e3);
    background-image: linear-gradient(#c9c9c9, #d5d5d5 10%, #e2e2e2 65%, #e3e3e3)
}

.x-dataview-loans .completion .x-innerhtml .bar {
    min-width: 1em;
    border: 1px solid #4b9123;
    -webkit-border-radius: 1em;
    border-radius: 1em;
    background-color: #74b446;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c6e1b2), color-stop(2%, #87c05e), color-stop(100%, #639a3c));
    background-image: -webkit-linear-gradient(#c6e1b2, #87c05e 2%, #639a3c);
    background-image: linear-gradient(#c6e1b2, #87c05e 2%, #639a3c)
}

突出显示ComponentView中的选定行？

2 个答案: