Advanced Search

ext js BorderLayout

/ Published in: JavaScript
Save to your folder(s)
version ext-2.0-rc1.
Dependencies
ext-all-debug.js
ext-yui-adapter.js
ext-all.css

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.