/ext-4.1.0_b3/examples/tabs/reorderable-tabs.js

https://bitbucket.org/srogerf/javascript · JavaScript · 87 lines · 78 code · 8 blank · 1 comment · 4 complexity · 0c5a611cba9fdeb9c647ec0c6aeced2a MD5 · raw file

  1. Ext.Loader.setConfig({enabled: true});
  2. Ext.Loader.setPath('Ext.ux', '../ux/');
  3. Ext.require([
  4. 'Ext.tab.*',
  5. 'Ext.ux.TabReorderer'
  6. ]);
  7. Ext.onReady(function() {
  8. var tabCount = 4;
  9. var tabPanel = Ext.create('Ext.tab.Panel', {
  10. renderTo: Ext.getBody(),
  11. width: 600,
  12. height: 400,
  13. //plain: true,
  14. bodyStyle: 'padding:5px',
  15. plugins: Ext.create('Ext.ux.TabReorderer'),
  16. items: [{
  17. xtype: 'panel',
  18. title: 'Tab 1',
  19. html : 'Test 1',
  20. closable: true
  21. }, {
  22. xtype: 'panel',
  23. title: 'Tab 2',
  24. html : 'Test 2',
  25. closable: true
  26. }, {
  27. xtype: 'panel',
  28. title: 'Tab 3',
  29. html : 'Test 3',
  30. closable: true
  31. }, {
  32. xtype: 'panel',
  33. title: 'Non Reorderable',
  34. html : "I can't be moved",
  35. reorderable: false,
  36. closable: true
  37. },{
  38. xtype: 'panel',
  39. title: 'Tab 4',
  40. html : 'Test 4',
  41. closable: true
  42. }],
  43. dockedItems: {
  44. dock: 'bottom',
  45. xtype: 'toolbar',
  46. items: [{
  47. text : 'Add an item',
  48. handler: function() {
  49. tabCount++;
  50. tabPanel.add({
  51. xtype: 'panel',
  52. title: 'Tab ' + tabCount,
  53. html : 'Content for tab ' + tabCount,
  54. closable: true
  55. });
  56. }
  57. }, {
  58. text: 'Toggle tabs enabled',
  59. handler: function() {
  60. tabPanel.tabBar.items.each(function(tab) {
  61. if (tab.disabled) {
  62. tab.enable();
  63. } else {
  64. tab.disable();
  65. }
  66. });
  67. }
  68. }, {
  69. text: 'Remove 2nd item',
  70. handler: function() {
  71. var item = tabPanel.items.items[1];
  72. if (item) {
  73. tabPanel.remove(item);
  74. }
  75. }
  76. }]
  77. }
  78. });
  79. });