bottom-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. tabPosition: 'bottom',
  9. defaults :{
  10. bodyPadding: 10
  11. },
  12. items: [{
  13. contentEl:'script',
  14. title: 'Short Text',
  15. closable: true
  16. },{
  17. contentEl:'markup',
  18. title: 'Long Text'
  19. }]
  20. });
  21. // second tabs built from JS
  22. var tabs2 = Ext.widget('tabpanel', {
  23. renderTo: document.body,
  24. activeTab: 0,
  25. width: 600,
  26. height: 250,
  27. tabPosition: 'bottom',
  28. plain: true,
  29. defaults :{
  30. autoScroll: true,
  31. bodyPadding: 10
  32. },
  33. items: [{
  34. title: 'Normal Tab',
  35. html: "My content was added during construction."
  36. },{
  37. title: 'Ajax Tab 1',
  38. loader: {
  39. url: 'ajax1.htm',
  40. contentType: 'html',
  41. loadMask: true
  42. },
  43. listeners: {
  44. activate: function(tab) {
  45. tab.loader.load();
  46. }
  47. }
  48. },{
  49. title: 'Ajax Tab 2',
  50. loader: {
  51. url: 'ajax2.htm',
  52. contentType: 'html',
  53. autoLoad: true,
  54. params: 'foo=123&bar=abc'
  55. }
  56. },{
  57. title: 'Event Tab',
  58. listeners: {
  59. activate: function(tab){
  60. alert(tab.title + ' was activated.');
  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. });