[原创]扩展组件TabPanel(支持标签左置右置)

近期项目需要标签在右侧并且标签文字要横过来的TabPanel。
G到一个,但是标签文字是正的
于是自己在ext-3.2.0写了一个

 

  afterRender: function(){
    Ext.ux.TabPanel.superclass.afterRender.call(this);
    if (this.tabAbout){
    	var st = this[this.stripTarget];
    	if(Ext.isIE){
    		st.dom.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
    	}
      else{
	      st.applyStyles('-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);');
	    }
	    
      st.applyStyles('overflow-x:hidden;overflow-y:visible;');
      
      var el = Ext.fly(this.strip.id).dom.parentNode;
      el.style.overflow = 'visible';
      
      el = el.parentNode;
      el.style.overflow = 'visible';
      
      el = el.parentNode;
      el.style.overflow = 'visible';
      
      this.setHeight(this.height || this.container.getHeight());
      
      if (this.tabAbout == 'right'){
      	this.bwrap.applyStyles('position:absolute;top:0px;left:0px;');
      }
      else if (this.tabAbout == 'left'){
				this.bwrap.applyStyles('position:absolute;top:0px;left:25px;');
				el = Ext.fly(this.strip.id).dom.parentNode;
	      el.style.position = 'relative';
	      el.style.top = (this.width || this.container.getWidth() - 25) + 'px';
	    }
    }
  }
 

上图


[原创]扩展组件TabPanel(支持标签左置右置)_第1张图片

 

附件解压到ext\examples\ux-TabPanel中

你可能感兴趣的:(ext,Microsoft,webkit)