版本支持:3.4.x
其他版本使用需要做兼容调整
使用时只需在代码中引用插件:plugins: new Ext.ux.panel.DraggableTabs()
<script>
Ext.onReady(function () {
var tabPanelConfig = {
plugins: new Ext.ux.panel.DraggableTabs(), //引用插件
activeTab: 0,
height: 150,
width: 300,
defaults: {
border: false,
closable: true,
xtype: 'panel'
},
items: [{
html: 'Tab 1 contents',
title: 'Tab1'
}, {
html: 'Tab 2 contents',
title: 'Tab2'
}, {
html: 'Tab 3 contents',
title: 'Tab3'
}],
bbar: {
xtype: 'toolbar',
items: [{
iconCls: 'icon-add',
text: 'Add Tab',
listeners: {
click: {
fn: function() {
this.ownerCt.ownerCt.add({ title: 'New Tab' });
}
}
}
}]
}
},
tabPanel1,
tabPanel2;
Ext.QuickTips.init();
tabPanel1 = new Ext.TabPanel(Ext.apply({
renderTo: 'tab-panel1',
enableTabScroll: true,
listeners: {
reorder: {
fn: function (tabPanel, movedTab) {
// do something here
}
}
}
}, tabPanelConfig));
tabPanel2 = new Ext.TabPanel(Ext.apply({
renderTo: 'tab-panel2',
tabPosition: 'bottom'
}, tabPanelConfig));
});
</script>
使用在相同版本中只需要替换插件: