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

最新推荐文章于 2023-05-23 22:35:14 发布

最新推荐文章于 2023-05-23 22:35:14 发布 · 325 阅读

文章标签：

#EXT #webkit #Microsoft

本文介绍如何在ext-3.2.0框架下，通过编写afterRender函数实现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';
	    }
    }
  }

上图