X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/tabs/reorderable-tabs.js diff --git a/examples/tabs/reorderable-tabs.js b/examples/tabs/reorderable-tabs.js new file mode 100755 index 00000000..70ac5607 --- /dev/null +++ b/examples/tabs/reorderable-tabs.js @@ -0,0 +1,87 @@ +Ext.Loader.setConfig({enabled: true}); + +Ext.Loader.setPath('Ext.ux', '../ux/'); + +Ext.require([ + 'Ext.tab.*', + 'Ext.ux.TabReorderer' +]); + +Ext.onReady(function() { + var tabCount = 4; + + var tabPanel = Ext.create('Ext.tab.Panel', { + renderTo: Ext.getBody(), + width: 600, + height: 400, + //plain: true, + bodyStyle: 'padding:5px', + plugins: Ext.create('Ext.ux.TabReorderer'), + items: [{ + xtype: 'panel', + title: 'Tab 1', + html : 'Test 1', + closable: true + }, { + xtype: 'panel', + title: 'Tab 2', + html : 'Test 2', + closable: true + }, { + xtype: 'panel', + title: 'Tab 3', + html : 'Test 3', + closable: true + }, { + xtype: 'panel', + title: 'Non Reorderable', + html : "I can't be moved", + reorderable: false, + closable: true + + },{ + xtype: 'panel', + title: 'Tab 4', + html : 'Test 4', + closable: true + }], + + dockedItems: { + dock: 'bottom', + xtype: 'toolbar', + items: [{ + text : 'Add an item', + handler: function() { + tabCount++; + + tabPanel.add({ + xtype: 'panel', + title: 'Tab ' + tabCount, + html : 'Content for tab ' + tabCount, + closable: true + }); + } + }, { + text: 'Toggle tabs enabled', + handler: function() { + tabPanel.tabBar.items.each(function(tab) { + if (tab.disabled) { + tab.enable(); + } else { + tab.disable(); + } + }); + } + }, { + text: 'Remove 2nd item', + handler: function() { + var item = tabPanel.items.items[1]; + + if (item) { + tabPanel.remove(item); + } + } + }] + } + }); +}); \ No newline at end of file