Split buttons are a great way of offering the user multiple actions while keeping the most common default action at the top level, and minimizing the number of buttons cluttering up the viewport.
This recipe will explain how to create a simple split button offering the user a choice of which format they would like to save their document.
We start with a blank HTML document with the Ext JS framework included and an
onReady
function ready to have our code added.Now we have our structure, we create a new
Ext.button.Split
instance with some simple configuration. We start by giving it atext
value, atooltip
, and ahandler
function:var splitButton = Ext.create('Ext.button.Split', { text: 'Save...', tooltip: 'Click the arrow to choose what format to save in...', handler: function(){ console.log('Save as Default'); } });
Now we have our button we will create a simple
Ext.panel.Panel
with a toolbar to contain our button:var panel = Ext...