Blog Archive

ExtJs add icon to button

Its easy to associate an image icon with a button in ExtJs, just follow these steps...

ExtJs add icon to button

Step1 : Gather all your icon images and dump it in a folder


ExtJs add icon to button

Step2 : Define style class for your icons

<style type="text/css">
.icon-go {
    background-image: url(images/go.jpg) !important;
}

.icon-back {
    background-image: url(images/back.jpg) !important;
}

.icon-add {
    background-image: url(images/add.gif) !important;
}
</style>

Step3 : Specify the class in the button iconCls property

items: [
 {
  xtype: 'button',
  id: 'add',
  text: 'New Entry',
  iconCls: 'icon-add'
 },
 {
  xtype: 'button',
  id: 'continue',
  text: 'Continue',
  iconCls: 'icon-go'
 }, 
 {
  xtype: 'button',
  id: 'back',
  text: 'Back',
  iconCls: 'icon-back'
 }
]

5 comments :