ExtJS TabPanel 移动标签页

如下代码...

做完后我发现... 还不如记录下新的顺序.然后把tabpanel里面的全部标签页移除,再按新的顺序一个个的加回来...

 

 

Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '/images/s.gif';
  Ext.QuickTips.init();
  testTabMove();
});

function testTabMove(){
  var tab = new Ext.TabPanel({
    activeTab:1,
    items:[
      {title:'xx1',html:'xxx1'},
      {title:'xx2',html:'xxx2'},
      {title:'xx3',html:'xxx3'},
      {title:'xx4',html:'xxx4'},
      {title:'xx5',html:'xxx5'}
    ],
    /**
     * 返回指定index对应的Panel
     * @param {number} index
     * @return {Panel} 
     */
    getTabByIndex:function(index){
      return this.items.itemAt(index);
    },
    /**
     * 返回指定index对应的标签页的Element对象
     * @param {number} index
     * @return {Ext.Element}
     */
    getStripByIndex:function(index){
      return Ext.get(this.getTabEl(this.getTabByIndex(index)));
    },
    /**
     * 返回指定的panel在tabpanel里面的index
     * @param {Ext.Panel} p
     * @return {number}
     */
    getTabIndex:function(p){
      return this.items.indexOf(p);
    },
    /**
     * 把某个Tab向左或向右移动
     * @param {string/panel} tab 要移动的tab的panel对象或者它的index
     * @param {number} dir 方向,负数为向左,正数为向右
     */
    moveTab:function(tab,dir){
      var srcIndex = Ext.isNumber(tab) ? tab : this.items.indexOf(tab);
      var targetIndex = srcIndex + dir;
      if(targetIndex>=0 && targetIndex<this.items.getCount()){
        var targetTab = this.items.itemAt(targetIndex);
        var targetStrip = Ext.get(this.getTabEl(targetTab));
	var srcTab = this.items.itemAt(srcIndex);
        var srcStrip = Ext.get(this.getTabEl(srcTab));
        //互换item的位置
        this.items.items[srcIndex] = targetTab;
        this.items.items[targetIndex] = srcTab;
        //互换Strip的位置
        dir<0 ? srcStrip.insertBefore(targetStrip): srcStrip.insertAfter(targetStrip);
        //清理
        targetTab=null;
        targetStrip=null;
	      srcTab=null;
        srcStrip=null;
        tab=null;
      }
    }
  });

  var f = new Ext.form.NumberField({value:'1',width:30});
  var p = new Ext.Panel({
    title:'::移动TabPanel测试::',
    items:[tab],
    renderTo:document.body,
    height:300,
    width:500,
    tbar:[
      '移动距离:',f,'-',{
        text:'左移',
        handler:function(){
          tab.moveTab(tab.getActiveTab(),-1*parseInt(f.getValue()));
        }
       },{
        text:'右移',
        handler:function(){
          tab.moveTab(tab.getActiveTab(),parseInt(f.getValue()));
        }
       }
    ]
  })
}

 

给个截图,免得大漠又说我:

 

 

 

评论

3 楼 xia635317478 2012-09-21  

好东西，我借用一下，看看能不能实现在panel中上下移动panel~

2 楼 atian25 2011-08-15  

嗯,4.x中tabpanel的tab是一个component了

1 楼 yyq745201 2011-08-15  

貌似在extjs4.0以前都是不支持选项卡拖动的