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 はデータビュー ビュー構成で定義されています。Kiva の例では、' ui: Loans ' という行です。したがって、CSS セクションは次のようになります。

.x-dataview-ローン.x-list-item {
 ...
}

ビューでの UI サフィックスの定義:

Ext.define('Kiva.view.LoansList', {
    拡張: 'Ext.DataView',
    xtype : 'ローンリスト',
    必要： [
        「Kiva.view.LoansListItem」
    ]、

    構成: {
        ui : 'ローン',
        ストア: 'ローン',
        useComponents: 真、
        defaultType: 'loanslistitem',
        deselectOnContainerClick: false
    }、

    onItemTap: function(コンテナ、ターゲット、インデックス、e) {
        var me = this;
        me.callParent(引数); // 警告: この呼び出しがないと、行は選択されません
    }

application.css 内の関連コード

.x-dataview-loans .x-img {
    右マージン: 1em;
    background-position: センター センター;
    幅: 60px;
    高さ: 60px
}

.x-dataview-loans .x-list-item {
    パディング: 1em;
    border-bottom: 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 .completion .x-innerhtml {
    ディスプレイ: -webkit-box;
    ディスプレイ: ボックス;
    -webkit-box-align: ストレッチ;
    ボックス整列: ストレッチ;
    高さ: 1em;
    幅: 100%;
    ボーダー: 1px ソリッド #bbb;
    -webkit-box-shadow: inset 0 0 1px #fff;
    パディング: 1px;
    -webkit-border-radius: 1em;
    ボーダー半径: 1em;
    背景色: #e2e2e2;
    背景画像: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c9c9c9), color-stop(10%, #d5d5d5), color-stop(65%, #e2e2e2), color-stop(100%, #e3e3e3));
    背景画像: -webkit-linear-gradient(#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;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c6e1b2), color-stop(2%, #87c05e), color-stop(100%, #639a3c));
    背景画像: -webkit-linear-gradient(#c6e1b2, #87c05e 2%, #639a3c);
    背景画像: 線形グラデーション(#c6e1b2、#87c05e 2%、#639a3c)
}