突出顯示ComponentView中的選定行？

Question

我正在使用此ComponentView示例： 小貓ComponentView

在我的變體中，我想在用戶點擊所選行時使其突出顯示，就像在xtype: 'list' 。 我該怎么做？

Answer 1

您可以通過使用tpl屬性，然后在<div>標記內設置css的class來實現此目的

像這樣

....
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：貸款 ”行。 因此，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)
}