tabs.js 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. Ext.require('Ext.tab.*');
  2. Ext.onReady(function(){
  3. // basic tabs 1, built from existing content
  4. var tabs = Ext.widget('tabpanel', {
  5. renderTo: 'tabs1',
  6. width: 450,
  7. activeTab: 0,
  8. defaults :{
  9. bodyPadding: 10
  10. },
  11. items: [{
  12. contentEl:'script',
  13. title: 'Short Text',
  14. closable: true
  15. },{
  16. contentEl:'markup',
  17. title: 'Long Text'
  18. }]
  19. });
  20. // second tabs built from JS
  21. var tabs2 = Ext.widget('tabpanel', {
  22. renderTo: document.body,
  23. activeTab: 0,
  24. width: 600,
  25. height: 250,
  26. plain: true,
  27. defaults :{
  28. autoScroll: true,
  29. bodyPadding: 10
  30. },
  31. items: [{
  32. title: 'Normal Tab',
  33. html: "My content was added during construction."
  34. },{
  35. title: 'Ajax Tab 1',
  36. loader: {
  37. url: 'ajax1.htm',
  38. contentType: 'html',
  39. loadMask: true
  40. },
  41. listeners: {
  42. activate: function(tab) {
  43. tab.loader.load();
  44. }
  45. }
  46. },{
  47. title: 'Ajax Tab 2',
  48. loader: {
  49. url: 'ajax2.htm',
  50. contentType: 'html',
  51. autoLoad: true,
  52. params: 'foo=123&bar=abc'
  53. }
  54. },{
  55. title: 'Event Tab',
  56. listeners: {
  57. activate: function(tab){
  58. setTimeout(function() {
  59. alert(tab.title + ' was activated.');
  60. }, 1);
  61. }
  62. },
  63. html: "I am tab 4's content. I also have an event listener attached."
  64. },{
  65. title: 'Disabled Tab',
  66. disabled: true,
  67. html: "Can't see me cause I'm disabled"
  68. }
  69. ]
  70. });
  71. });