4

デフォルトのチェックボックスの画像を変更する際に問題に直面しています。私はchecked.pngとunchecked.pngの2つの画像を追加しました。また、checked と unchecked の 2 つの CSS クラスを追加しました。未チェックの画像しか表示されていませんが、チェックするとチェック済みの画像が表示されません。以下と同じことを行ってデフォルトのボタンを変更しましたが、ボタンにはうまく機能します。しかし、チェックボックスの場合、これは機能しません（チェックボックスフィールドにpressedClsがありません）。参照用の小さなスニペットを次に示します。

   {
    xtype: 'checkboxfield',
    ui:'plain',
    checked: 'true',
    action: 'didnotassisted_Action',
    id: 'id_assignment_didNotAssisted',
    cls: 'closeout-checkbox-unchecked',
    // pressedCls: 'closeout-checkbox-checked'
    },

CSS:

.closeout-checkbox-unchecked{
    background-color:transparent;
    background-image:url('../images/unchecked.png');
    height: 44px;
    width: 44px;
}

.closeout-checkbox-checked{
    background-color:transparent;
    background-image:url('../images/checked.png');
    height: 44px;
    width: 44px;
}

それを完了するための別のアプローチがある場合は、私を助けてください。よろしくお願いします。

@Andrea、これはコードを適用した後のスクリーンショットです。 白色の背景

4

1 に答える 1

3

Sencha は、チェックボックスのステータスを区別するためにクラスを使用していません。代わりに、:checkedチェックボックスの疑似クラス セレクターを利用しています。

チェックボックスのアイコンを変更して、疑似要素:afterをその.x-field-mask兄弟に追加できます。

ui: 'custom'あなたに与えて、checkboxfieldこれらのCSSを追加してください：

.x-field-custom .x-input-checkbox:checked  + .x-field-mask:after  {
    content: "";
    height: 45px;
    width: 45px;
    position: absolute;
    top: 0;
    right: 1em;
    background-image:url(http://png-4.findicons.com/files/icons/2232/wireframe_mono/48/checkbox_checked.png);
    background-size: contain;
    display: block;
}

.x-field-custom .x-input-checkbox  + .x-field-mask:after {
    content: "";
    height: 45px;
    width: 45px;
    position: absolute;
    top: 0;
    right: 1em;
    background-image:url(http://png-2.findicons.com/files/icons/2232/wireframe_mono/48/checkbox_unchecked.png);
    background-size: contain;
    display: block;
}

Sencha 2.2.1 でテスト済み

于 2013-07-04T20:47:53.787 に答える