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'
 }
]

7 comments :

  1. Thanks a lot for this helpful little tutorial

    ReplyDelete
  2. Thanks but my image for that button is not displayi ng fully.only part of image is visible...plz help ne out of this

    ReplyDelete