Ext.ux.StateButton

StateButton is a Button which has various states. When the Button is clicked, it cycles to the next state. The state can also be set programmatically.

Each state can be configured with a different icon, text, overflow text, event handler etc.

Examples

The following code was used to create the toolbar instance:

    
        var stateChangeHandler = function (btn, state) {
          console.log("The button with id '" + btn.id + "' fired the handler for state '" + state + "'");
        };

        new Ext.ux.StateButton( {
          id: 'toolbar-state-button',
          states: [ {
            itemId: 'state1',
            text: 'TB State 1',
            iconCls: 'state1-icon',
            handler: stateChange,
            overflowText: 'State 1 Overflow Menu'
          }, {
            itemId: 'state2',
            text: 'TB State 2',
            iconCls: 'state2-icon',
            handler: stateChange,
            overflowText: "State 2 won't fit on the toolbar"
          }, {
            itemId: 'state3',
            text: 'TB State 3',
            iconCls: 'state3-icon',
            handler: stateChange,
            overflowText: 'State 3 Overflowing'
          } ]
        } )
    

The following code was used to create the form instance:

    
        var stateChangeHandler = function (btn, state) {
          console.log("The button with id '" + btn.id + "' fired the handler for state '" + state + "'");
        };

        new Ext.ux.StateButton( {
          id: 'form-state-button',
          states: [ {
            itemId: 'state1',
            text: 'State 1',
            iconCls: 'state1-icon',
            tooltip: 'State 1 Custom Tooltip',
            handler: stateChange
          }, {
            itemId: 'state2',
            text: 'State 2',
            iconCls: 'state2-icon',
            tooltip: 'State 2',
            handler: stateChange
          } ]
        } )