如何在点击它时突出显示extjs中的按钮

Question

items: [{
    xtype: 'button',
    text: 'Today',
    ui:'default-toolbar',
    margin: '10 10 10 10'
},{
    xtype: 'button',
    text: 'Yesterday',
    ui:'default-toolbar',
    margin: '0 10 10 10'

    }
},{
    xtype: 'button',
    text:'Last 7 days',
    ui:'default-toolbar',
    margin: '0 10 10 10'
}, {
    xtype: 'button',
    text: 'Last Month',
    ui:'default-toolbar',
    margin: '0 10 10 10'

}]

Answer 1

Ext.Button有一个属性enableToggle如果设置为true，则会在点击时将pressedCls应用于该按钮，并在再次按下时移除pressedCls。

示例代码：

＆＃13;

＆＃13;

Ext.application({
  name: 'Fiddle',

  launch: function() {
    Ext.create('Ext.Container', {
      renderTo: Ext.getBody(),
      items: [{
        xtype: 'button',
        text: 'My Button',
        enableToggle: true
      }]
    });
  }
});

＆＃13;

<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css">
<script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>

＆＃13;

＆＃13;

＆＃13;

对于多个按钮： 当我们需要在多个按钮之间切换pressedCls时。我们需要使用按钮的toggleGroup属性。它会在同一toggleGroup的多个地方之间切换 pressedCls 。

示例代码：

＆＃13;

＆＃13;

Ext.application({
  name: 'Fiddle',

  launch: function() {
    Ext.create('Ext.Container', {
      renderTo: Ext.getBody(),
layout:'vbox',
      items: [{
        xtype: 'button',
        text: 'Today',
        enableToggle: true,
        toggleGroup:'myButtonGroup'
      },{
        xtype: 'button',
        text: 'Yesterday',
        enableToggle: true,
        toggleGroup:'myButtonGroup'
      },
      {
        xtype: 'button',
        text: 'Last 7 days',
        enableToggle: true,
        toggleGroup:'myButtonGroup'
      }]
    });
  }
});

＆＃13;

<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css">
<script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>

＆＃13;

＆＃13;

＆＃13;