Highlighting the selected row in a ComponentView?

Question

I'm working with this ComponentView example: Kitten ComponentView

In my variation, I'd like to highlight the selected row when the user taps on it, as would happen in an xtype: 'list' . How can I accomplish this?

Answer 1

You can achieve this by using an tpl property and then set the class of the css inside the <div> tag

Something like this,

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

and then write your css code as,

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

Answer 2

After examining the Sencha Kiva example in their examples directory, it looks like it's a combination of the .x-dataview-UI_NAME class with .x-list-item, where UI_NAME is defined is the dataview view config. In the Kiva example, it's the line ' '. ”行。 So, the CSS section looks something like this:

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

Defining the UI suffix in the view:

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

    config: {
        
        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
    }

The relevant code in 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)
}