extjs-gpl
Version:
GPL licensed version of Sencha Ext JS
61 lines (55 loc) • 1.42 kB
JavaScript
/**
* This example shows how to create a tab panel with reorderable tabs.
* Simply drag any tab to change the order.
*/
Ext.define('KitchenSink.view.tab.ReorderableTabs', {
extend: 'Ext.tab.Panel',
requires: [
'Ext.ux.TabReorderer'
],
xtype: 'reorderable-tabs',
controller: 'reorderable-tabs',
//<example>
otherContent: [{
type: 'ViewController',
path: 'classic/samples/view/tab/ReorderableTabsController.js'
}],
exampleTitle: 'Reorderable Tabs',
//</example>
width: 600,
height: 400,
plugins: 'tabreorderer',
defaults: {
bodyPadding: 10,
scrollable: true,
closable: true
},
items: [{
title: 'Tab 1',
html: 'The tabs in this example are reorderable. Drag any tab to change the order.'
}, {
title: 'Tab 2',
html: KitchenSink.DummyText.extraLongText
}, {
title: 'Tab 3',
html: KitchenSink.DummyText.longText
}, {
title: 'Non Reorderable',
html: "I can't be moved",
reorderable: false
},{
title: 'Tab 4',
html: KitchenSink.DummyText.extraLongText
}],
dockedItems: {
dock: 'bottom',
xtype: 'toolbar',
items: [{
text: 'Add a Tab',
glyph: 43,
listeners: {
click: 'onAddTabClick'
}
}]
}
});