if(!Ext.ww) Ext.ww = {}
Ext.ww.Button = Ext.extend(Ext.Button, {
  btnType: 'default',
  buttonWidth: '',
  _targetTemplate: '<table><tr><td width="{buttonWidth}"><button type="{1}">{target}</button></td></tr></table>',
  _imageType: function () {
    this.targetID = 'btnImage-' + this.id;
    this._targetTemplate = this._targetTemplate.replace('{buttonWidth}', this.buttonWidth);
    this.template = new Ext.Template(this._targetTemplate.replace('{target}', 
      '<img id="' + this.targetID + '" src="' + (this.imgSrc||'') + '">')
    );
    this.on('mouseover', function () {
      if (this.imgOverSrc) Ext.fly(this.targetID).dom.src = this.imgOverSrc;
    });
    this.on('mouseout', function () {
      if (this.imgOverSrc) Ext.fly(this.targetID).dom.src = this.imgSrc;
    });
  },
  _labelType: function () {
    this.targetID = 'btnLabel-' + this.id;
    this.template = new Ext.Template(this._targetTemplate.replace('{target}', 
    '<span id="' + this.targetID + '">{0}</span>')
    );
    this.overStyle = this.overStyle||{color: '#cd3301', 'text-decoration': 'underline'};
    this.on('mouseover', function () {
      Ext.fly(this.targetID).setStyle(this.overStyle);
    });
    this.on('mouseout', function () {
      if (!this.outStyle) {
        this.outStyle = ww.clone(this.overStyle);
        for (var i in this.outStyle) this.outStyle[i] = '';
      }
      Ext.fly(this.targetID).setStyle(this.outStyle);
    });
  },
  initComponent: function(){
    if (this.btnType == 'label') this._labelType();
    if (this.btnType == 'image') this._imageType();
    Ext.Window.superclass.initComponent.call(this);
  }
});