煎茶で通常のボタンを押した様子は？

Question

ユーザーが押したときに通常のボタンの外観を押さえるにはどうすればいいですか？また、別のボタンをクリックしたときに正常に見えるようにする方法もありますか？セグメント化されたボタンを使用してこれを行うことができます。しかし、どのように通常のボタンを使用してそれを達成するには？ sencha-touch-debug.cssで

Answer 1

、押されconfirm buttonために適用されるCSSをチェックしてください。..

/* 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); 
} 

あなたのapp.cssファイルで、このCSSを持っているし、その後pressedClsプロパティを設定することによって、あなたのボタンにそれを適用することができます。

pressedCls: 'x-button-pressed' 

Answer 2

ロードランナーの答えはあなたがセグメント化されたボタンについて言及内容に応じて、私はあなたがボタン上をクリックを意味だと思いながら、ユーザは、それを押すとを保持しているときにソリューションです。

もしそうなら、あなたの質問に答えるために、私はあなたが（idで自分の名前と同じ）を2 Ext.Button、button_1とbutton_2を持っていることを前提とし

あなたはbutton_1をクリックして、押されたようにそれはそうしたい：

あなたはbutton_2をクリックすると、同様にそれを行うとbutton_1の外観を変更

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

：

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

これが役に立ちます。

Answer 3

有効にすると有効になります。 toggleGroupは、グループ内の特定のボタンをグループ化することです。

        { 
             xtype: 'button', 
             id: 'btnId' 
             enableToggle: true, 
             text: 'Toggele Button', 
             toggleGroup: 'accountbuttons' 
            }