Extjs 4.1 Grid - How to change mutual icon header by click

Question

I have a grid in http://jsfiddle.net/Xhp8N/

I want when i click to first header then icon header will change mutual bettween image a and image b

here is my code

{ text: '<img src = "http://pic.dhe.ibm.com/infocenter/tivihelp/v15r1/topic/com.ibm.itm.doc_6.2.1/images/icon_checkbox.gif"/>',  dataIndex: 'name' 
,listeners: {
    headerclick: function(ct, header, e, t) {
           header.setText('<img src="http://gentlerainmarketing.com/images/icon_checkbox.gif"/>');
           }
        }
}

but my code only change one time, How to do that thanks

Answer 1

Try this simple trick :

  var img1 = '<img src="http://gentlerainmarketing.com/images/icon_checkbox.gif"/>';
  var img2 = '<img src = "http://pic.dhe.ibm.com/infocenter/tivihelp/v15r1/topic/com.ibm.itm.doc_6.2.1/images/icon_checkbox.gif"/>';
  if(header.text == img2){
      header.setText(img1);
  }
  else{
      header.setText(img2);
  }

Here is the fiddle