advanced code snippet search

We Recommend

Pro JavaScript Techniques Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.

Posted By

arunpjohny on 11/29/07


Tagged

extjs


Versions (?)


ext js BorderLayout

Published in: JavaScript 

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

Plain TextExpand 
  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.