2

ユーザーがボタンを押したときに通常のボタンが押されたように見せる方法は? また、別のボタンがクリックされたときに正常に見えるようにする方法は? セグメント化されたボタンを使用してこれを行うことができます。しかし、通常のボタンを使用してそれを達成する方法は?

4

3 に答える 3

3

で、押された..sencha-touch-debug.cssに適用されたcssを確認します。confirm button

/* line 73, ../themes/stylesheets/sencha-touch/default/_mixins.scss */
.x-button.x-button-confirm.x-button-pressing, .x-button.x-button-confirm.x-button-pressing:after, .x-button.x-button-confirm.x-button-pressed, .x-button.x-button-confirm.x-button-pressed:after, .x-button.x-button-confirm.x-button-active, .x-button.x-button-confirm.x-button-active:after, .x-toolbar .x-button.x-button-confirm.x-button-pressing, .x-toolbar .x-button.x-button-confirm.x-button-pressing:after, .x-toolbar .x-button.x-button-confirm.x-button-pressed, .x-toolbar .x-button.x-button-confirm.x-button-pressed:after, .x-toolbar .x-button.x-button-confirm.x-button-active, .x-toolbar .x-button.x-button-confirm.x-button-active:after, .x-button.x-button-confirm-round.x-button-pressing, .x-button.x-button-confirm-round.x-button-pressing:after, .x-button.x-button-confirm-round.x-button-pressed, .x-button.x-button-confirm-round.x-button-pressed:after, .x-button.x-button-confirm-round.x-button-active, .x-button.x-button-confirm-round.x-button-active:after, .x-toolbar .x-button.x-button-confirm-round.x-button-pressing, .x-toolbar .x-button.x-button-confirm-round.x-button-pressing:after, .x-toolbar .x-button.x-button-confirm-round.x-button-pressed, .x-toolbar .x-button.x-button-confirm-round.x-button-pressed:after, .x-toolbar .x-button.x-button-confirm-round.x-button-active, .x-toolbar .x-button.x-button-confirm-round.x-button-active:after, .x-button.x-button-confirm-small.x-button-pressing, .x-button.x-button-confirm-small.x-button-pressing:after, .x-button.x-button-confirm-small.x-button-pressed, .x-button.x-button-confirm-small.x-button-pressed:after, .x-button.x-button-confirm-small.x-button-active, .x-button.x-button-confirm-small.x-button-active:after, .x-toolbar .x-button.x-button-confirm-small.x-button-pressing, .x-toolbar .x-button.x-button-confirm-small.x-button-pressing:after, .x-toolbar .x-button.x-button-confirm-small.x-button-pressed, .x-toolbar .x-button.x-button-confirm-small.x-button-pressed:after, .x-toolbar .x-button.x-button-confirm-small.x-button-active, .x-toolbar .x-button.x-button-confirm-small.x-button-active:after {
  background-color: #628904;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3e5702), color-stop(10%, #507003), color-stop(65%, #628904), color-stop(100%, #648c04));
  background-image: -webkit-linear-gradient(#3e5702, #507003 10%, #628904 65%, #648c04);
  background-image: linear-gradient(#3e5702, #507003 10%, #628904 65%, #648c04);
}

このcssをapp.cssファイルに含めてから、プロパティを設定してボタンに適用できますpressedCls。

pressedCls: 'x-button-pressed'
于 2012-05-11T05:14:00.037 に答える
1

roadRunnerの答えは、ユーザーがボタンを押し続けているときの解決策ですが、セグメント化されたボタンについてのあなたの言及によれば、ボタンをクリックすることを意味していると思います。

もしそうなら、あなたの質問に答えるために、私はあなたが2つ持っていると仮定しますExt.Button、button_1そしてbutton_2（id彼らの名前と同じです）

クリックしてbutton_1押したように見せたい場合：

Ext.getCmp('button_1').setCls('x-button-pressing');

をクリックしbutton_2たら、同様に実行して、次の外観を変更しますbutton_1。

Ext.getCmp(`button_2`).setCls('x-button-pressing');
Ext.getCmp(`button_1`).setCls('');

お役に立てれば。

于 2012-05-12T10:30:40.513 に答える
-1

有効化トグルが機能するはずです。toggleGroup は、グループ内の特定のボタンをグループ化することです。

                                    {
                                        xtype: 'button',
                                        id: 'btnId'
                                        enableToggle: true,
                                        text: 'Toggele Button',
                                        toggleGroup: 'accountbuttons'
                                    }
于 2014-06-09T19:59:42.050 に答える