代码如下

[html]
   

可拖动的选项卡

   

[Js]
//首先要动态加载ux扩展的js
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath("Ext.ux", "/ExtJs/ux");
Ext.require([
    "Ext.tip.QuickTipManager",
    "Ext.tab.Panel",
    "Ext.ux.TabScrollerMenu",
    "Ext.ux.TabReorderer",
    "Ext.ux.TabCloseMenu",
    "Ext.ux.GroupTabPanel"
]);

//以下是功能代码

    //可拖动的选项卡
    var tabs4 = Ext.createWidget("tabpanel", {
        renderTo: "content4",
        activeTab: 0,
        width: 600,
        height: 150,
        plugins: Ext.create("Ext.ux.TabReorderer"),
        items: [{
            xtype: "panel",
            title: "tab不可拖",
            html: "这个选项卡不可被拖动",
            reorderable: false,
            closable: true
        }]
    });
    for (var i = 0; i < 3; i++)
        tabs4.add({
            title: "Tab " + i,
            id: "Tabs4_" + i,
            html: "选项卡文本部分 " + (index) + "

"
        });

 

效果如下，可见一个tab已经被移动：

[extjs api 中文]extjs 可拖动的选项卡实现方法

http://m.bbyears.com/wangyezhizuo/33039.html

推荐访问:extjs6 extjs入门 extjs下载 extjs教程 extjs4