如何在不同的顏色顯示ExtJS的按鈕被點擊

Ext.application({ 
    name: 'Fiddle', 
    launch: function() { 
     Ext.create({ 
      xtype: 'form', 
      layout: { 
       type: 'hbox', 
       pack: 'center', 
      }, 
      renderTo: Ext.getBody(), 
      width: 800, 
      items: [{ 
       xtype: 'button', 
       margin: '10 10 10 10', 
       text: 'today', 
       ui:'default-toolbar', 
       handler: function() { 
        Ext.getCmp("new").show(); 
        Ext.getCmp("test").hide(); 
       } 
      }, { 
       xtype: 'button', 
       margin: '10 0 10 10', 
       ui:'default-toolbar', 
       text: 'last 7days', 
       handler: function() { 
        Ext.getCmp("test").show(); 
        Ext.getCmp("new").hide(); 
       } 
      }, 
      { 
       xtype: 'panel', 
       margin: '10 20 10 20', 
       id: 'new', 
       html: 'you have selcted today button', 
       hidden: true 
      }, 
      { 
       xtype: 'panel', 
       margin: '10 20 10 20', 
       id: 'test', 
       html: 'you have selcted last 7days button', 
       hidden: true 
      }] 
     }); 
    } 
});

來源

2017-10-05 anka

看來，如果你想其中的一個選擇多個按鈕，當它。爲此，您必須爲所有按鈕提供相同的toggleGroup配置。

切換的按鈕然後顯示爲比未模糊的按鈕更深的藍色。您可能必須將handler配置中的功能更改爲toggleHandler。

來源

2017-10-05 12:54:54 Alexander

你可以提前提供任何小提琴示例 – anka

例子：

Ext.application({ 
name: 'Fiddle', 
launch: function() { 
    Ext.create({ 
     xtype: 'form', 
     layout: { 
      type: 'hbox', 
      pack: 'center', 
     }, 
     renderTo: Ext.getBody(), 
     width: 800, 
     items: [{ 
      xtype: 'button', 
      margin: '10 10 10 10', 
      text: 'today', 
      ui:'default-toolbar', 
      handler: function(btn) { 
       var otherBtn = btn.up('form').down('button[text=last 7days]'); 
       btn.setStyle('background-color', '#08a4ff'); 
       otherBtn.setStyle('background-color', '#f6f6f6'); 
       Ext.getCmp("new").show(); 
       Ext.getCmp("test").hide(); 
      } 
     }, { 
      xtype: 'button', 
      margin: '10 0 10 10', 
      ui:'default-toolbar', 
      text: 'last 7days', 
      handler: function(btn) { 
       var otherBtn = btn.up('form').down('button[text=today]'); 
       btn.setStyle('background-color', '#08a4ff'); 
       otherBtn.setStyle('background-color', '#f6f6f6'); 
       Ext.getCmp("test").show(); 
       Ext.getCmp("new").hide(); 
      } 
     }, 
     { 
      xtype: 'panel', 
      margin: '10 20 10 20', 
      id: 'new', 
      html: 'you have selcted today button', 
      hidden: true 
     }, 
     { 
      xtype: 'panel', 
      margin: '10 20 10 20', 
      id: 'test', 
      html: 'you have selcted last 7days button', 
      hidden: true 
     }] 
    }); 
}Ext.application({ 
name: 'Fiddle', 
launch: function() { 
    Ext.create({ 
     xtype: 'form', 
     layout: { 
      type: 'hbox', 
      pack: 'center', 
     }, 
     renderTo: Ext.getBody(), 
     width: 800, 
     items: [{ 
      xtype: 'button', 
      margin: '10 10 10 10', 
      text: 'today', 
      ui:'default-toolbar', 
      handler: function(btn) { 
       var otherBtn = btn.up('form').down('button[text=last 7days]'); 
       btn.setStyle('background-color', '#08a4ff'); 
       otherBtn.setStyle('background-color', '#f6f6f6'); 
       Ext.getCmp("new").show(); 
       Ext.getCmp("test").hide(); 
      } 
     }, { 
      xtype: 'button', 
      margin: '10 0 10 10', 
      ui:'default-toolbar', 
      text: 'last 7days', 
      handler: function(btn) { 
       var otherBtn = btn.up('form').down('button[text=today]'); 
       btn.setStyle('background-color', '#08a4ff'); 
       otherBtn.setStyle('background-color', '#f6f6f6'); 
       Ext.getCmp("test").show(); 
       Ext.getCmp("new").hide(); 
      } 
     }, 
     { 
      xtype: 'panel', 
      margin: '10 20 10 20', 
      id: 'new', 
      html: 'you have selcted today button', 
      hidden: true 
     }, 
     { 
      xtype: 'panel', 
      margin: '10 20 10 20', 
      id: 'test', 
      html: 'you have selcted last 7days button', 
      hidden: true 
     }] 
    }); 
} 
});

您還可以使用CSS類的代碼。而不是使用setStyle，你可以addClass

來源

2017-10-12 04:50:22 Sangnc

如何在不同的顏色顯示ExtJS的按鈕被點擊

回答

相關問題