Posted By

arunpjohny on 11/29/07


Tagged

extjs


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Anber


ext js BorderLayout


 / Published in: JavaScript
 

version ext-2.0-rc1. Dependencies ext-all-debug.js ext-yui-adapter.js ext-all.css

  1. <div id="pageContainer" class="pageContainer"></div>
  2. <div id="west">
  3. <p>Hi. I'm the west panel.</p>
  4. </div>
  5. <div id="north">
  6. <p>Hi. I'm the north panel.</p>
  7. </div>
  8. <div id="center">
  9. <p>Hi. I'm the center panel.</p>
  10. </div>
  11.  
  12. Ext.onReady(
  13. borderLayout
  14. );
  15.  
  16.  
  17. function borderLayout(){
  18. var center = new Ext.Panel({
  19. items: [{
  20. contentEl: 'center',
  21. autoScroll: true,
  22. border: false
  23. }]
  24. });
  25.  
  26. var border = new Ext.Panel({
  27. title: 'Border Layout',
  28. height: 500,
  29. layout: 'border',
  30. items: [{
  31. title: 'North Panel',
  32. region: 'north',
  33. height: 100,
  34. minSize: 75,
  35. maxSize: 250,
  36. margins: '5 5 5 5',
  37. border: false,
  38. items: [{
  39. contentEl: 'north',
  40. autoScroll: true,
  41. border: false
  42. }]
  43. },{
  44. title: 'South Panel',
  45. region: 'south',
  46. height: 100,
  47. minSize: 75,
  48. maxSize: 250,
  49. margins: '5 5 5 5'
  50. },{
  51. title: 'East Panel',
  52. region: 'east',
  53. margins: '0 5 0 0',
  54. width: 200,
  55. minSize: 100,
  56. maxSize: 300
  57. },{
  58. title: 'West Panel',
  59. region:'west',
  60. margins: '0 0 0 5',
  61. width: 200,
  62. minSize: 100,
  63. maxSize: 300,
  64. items: [{
  65. contentEl: 'west',
  66. autoScroll: true,
  67. border: false
  68. }]
  69. },{
  70. title: 'Main Content',
  71. region: 'center',
  72. margins: '0 0 0 0',
  73. items: [center]
  74. }]
  75. });
  76.  
  77. border.render('pageContainer');
  78. }

Report this snippet  

You need to login to post a comment.