[原创]扩展组件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';
	    }
    }
  }

 

上图

 

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

评论

5 楼 lackhurt 2010-05-19  

fcylf 写道

兄弟,能把你这个再改造一下吗?
1:左边的 tabPosition: 'left', 让缺口从内向外;
2:文字垂直居中排列;
如能做到,这个改造就很完美了!!

最近项目比较紧,有时间我会完善一下的
多谢你的建议

4 楼 fcylf 2010-05-16  

兄弟,能把你这个再改造一下吗?
1:左边的 tabPosition: 'left', 让缺口从内向外;
2:文字垂直居中排列;
如能做到,这个改造就很完美了!!

3 楼 lackhurt 2010-05-14  

joehe 写道

文字显示要是正的就好了

呵呵 客户就是要翻转过来的效果

2 楼 joehe 2010-05-12  

文字显示要是正的就好了

1 楼 lackhurt 2010-04-28  

附件放到ext\examples\下