六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 149|回复: 0

ExtJS TabPanel 移动标签页

[复制链接]

升级  12%

16

主题

16

主题

16

主题

秀才

Rank: 2

积分
68
 楼主| 发表于 2013-2-7 20:33:28 | 显示全部楼层 |阅读模式
如下代码...
做完后我发现... 还不如记录下新的顺序.然后把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()));        }       }    ]  })} 
给个截图,免得大漠又说我:
 


 
 
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表