2

当用户按下它时，如何使普通按钮看起来被按下？还有当点击另一个按钮时如何使它看起来正常？我们可以使用分段按钮来做到这一点。但是如何使用普通按钮来实现呢？

4

3 回答 3

3

在sencha-touch-debug.css中，查看为按下的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'
于 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 回答