<html>\r
<head>\r
<title>Complex Layout</title>\r
- <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />\r
+ <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />\r
\r
- <!-- GC -->\r
- <!-- LIBS -->\r
- <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>\r
- <!-- ENDLIBS -->\r
-\r
- <script type="text/javascript" src="../../ext-all.js"></script>\r
- \r
- <!--<script language="javascript" src="../grid/PropsGrid.js"></script>-->\r
- <style type="text/css">\r
- html, body {\r
+ <style type="text/css">\r
+ html, body {\r
font:normal 12px verdana;\r
margin:0;\r
padding:0;\r
overflow:hidden;\r
height:100%;\r
}\r
- p {\r
- margin:5px;\r
- }\r
+ p {\r
+ margin:5px;\r
+ }\r
.settings {\r
background-image:url(../shared/icons/fam/folder_wrench.png);\r
}\r
background-image:url(../shared/icons/fam/folder_go.png);\r
}\r
</style>\r
- <script type="text/javascript">\r
- Ext.onReady(function(){\r
\r
+ <!-- GC -->\r
+ <!-- LIBS -->\r
+ <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>\r
+ <!-- ENDLIBS -->\r
+\r
+ <script type="text/javascript" src="../../ext-all.js"></script>\r
+\r
+ <!-- EXAMPLES -->\r
+ <script type="text/javascript" src="../shared/examples.js"></script>\r
+ \r
+ <script type="text/javascript">\r
+ Ext.onReady(function(){\r
+ \r
// NOTE: This is an example showing simple state management. During development,\r
// it is generally best to disable state management as dynamically-generated ids\r
// can change across page loads, leading to unpredictable results. The developer\r
// should ensure that stable state ids are set for stateful components in real apps.\r
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());\r
\r
- var viewport = new Ext.Viewport({\r
- layout:'border',\r
- items:[\r
- new Ext.BoxComponent({ // raw\r
- region:'north',\r
- el: 'north',\r
- height:32\r
- }),{\r
- region:'south',\r
- contentEl: 'south',\r
- split:true,\r
- height: 100,\r
- minSize: 100,\r
- maxSize: 200,\r
- collapsible: true,\r
- title:'South',\r
- margins:'0 0 0 0'\r
- }, {\r
- region:'east',\r
- title: 'East Side',\r
- collapsible: true,\r
- split:true,\r
- width: 225,\r
- minSize: 175,\r
- maxSize: 400,\r
- layout:'fit',\r
- margins:'0 5 0 0',\r
- items:\r
- new Ext.TabPanel({\r
- border:false,\r
- activeTab:1,\r
- tabPosition:'bottom',\r
- items:[{\r
- html:'<p>A TabPanel component can be a region.</p>',\r
- title: 'A Tab',\r
- autoScroll:true\r
- },\r
- new Ext.grid.PropertyGrid({\r
- title: 'Property Grid',\r
- closable: true,\r
- source: {\r
- "(name)": "Properties Grid",\r
- "grouping": false,\r
- "autoFitColumns": true,\r
- "productionQuality": false,\r
- "created": new Date(Date.parse('10/15/2006')),\r
- "tested": false,\r
- "version": .01,\r
- "borderWidth": 1\r
- }\r
- })]\r
- })\r
- },{\r
- region:'west',\r
- id:'west-panel',\r
- title:'West',\r
- split:true,\r
- width: 200,\r
- minSize: 175,\r
- maxSize: 400,\r
- collapsible: true,\r
- margins:'0 0 0 5',\r
- layout:'accordion',\r
- layoutConfig:{\r
- animate:true\r
- },\r
- items: [{\r
- contentEl: 'west',\r
- title:'Navigation',\r
- border:false,\r
- iconCls:'nav'\r
- },{\r
- title:'Settings',\r
- html:'<p>Some settings in here.</p>',\r
- border:false,\r
- iconCls:'settings'\r
- }]\r
- },\r
+ var viewport = new Ext.Viewport({\r
+ layout: 'border',\r
+ items: [\r
+ // create instance immediately\r
+ new Ext.BoxComponent({\r
+ region: 'north',\r
+ height: 32, // give north and south regions a height\r
+ autoEl: {\r
+ tag: 'div',\r
+ html:'<p>north - generally for menus, toolbars and/or advertisements</p>'\r
+ }\r
+ }), {\r
+ // lazily created panel (xtype:'panel' is default)\r
+ region: 'south',\r
+ contentEl: 'south',\r
+ split: true,\r
+ height: 100,\r
+ minSize: 100,\r
+ maxSize: 200,\r
+ collapsible: true,\r
+ title: 'South',\r
+ margins: '0 0 0 0'\r
+ }, {\r
+ region: 'east',\r
+ title: 'East Side',\r
+ collapsible: true,\r
+ split: true,\r
+ width: 225, // give east and west regions a width\r
+ minSize: 175,\r
+ maxSize: 400,\r
+ margins: '0 5 0 0',\r
+ layout: 'fit', // specify layout manager for items\r
+ items: // this TabPanel is wrapped by another Panel so the title will be applied\r
new Ext.TabPanel({\r
- region:'center',\r
- deferredRender:false,\r
- activeTab:0,\r
- items:[{\r
- contentEl:'center1',\r
- title: 'Close Me',\r
- closable:true,\r
- autoScroll:true\r
- },{\r
- contentEl:'center2',\r
- title: 'Center Panel',\r
- autoScroll:true\r
- }]\r
+ border: false, // already wrapped so don't add another border\r
+ activeTab: 1, // second tab initially active\r
+ tabPosition: 'bottom',\r
+ items: [{\r
+ html: '<p>A TabPanel component can be a region.</p>',\r
+ title: 'A Tab',\r
+ autoScroll: true\r
+ }, new Ext.grid.PropertyGrid({\r
+ title: 'Property Grid',\r
+ closable: true,\r
+ source: {\r
+ "(name)": "Properties Grid",\r
+ "grouping": false,\r
+ "autoFitColumns": true,\r
+ "productionQuality": false,\r
+ "created": new Date(Date.parse('10/15/2006')),\r
+ "tested": false,\r
+ "version": 0.01,\r
+ "borderWidth": 1\r
+ }\r
+ })]\r
})\r
- ]\r
+ }, {\r
+ region: 'west',\r
+ id: 'west-panel', // see Ext.getCmp() below\r
+ title: 'West',\r
+ split: true,\r
+ width: 200,\r
+ minSize: 175,\r
+ maxSize: 400,\r
+ collapsible: true,\r
+ margins: '0 0 0 5',\r
+ layout: {\r
+ type: 'accordion',\r
+ animate: true\r
+ },\r
+ items: [{\r
+ contentEl: 'west',\r
+ title: 'Navigation',\r
+ border: false,\r
+ iconCls: 'nav' // see the HEAD section for style used\r
+ }, {\r
+ title: 'Settings',\r
+ html: '<p>Some settings in here.</p>',\r
+ border: false,\r
+ iconCls: 'settings'\r
+ }]\r
+ },\r
+ // in this instance the TabPanel is not wrapped by another panel\r
+ // since no title is needed, this Panel is added directly\r
+ // as a Container\r
+ new Ext.TabPanel({\r
+ region: 'center', // a center region is ALWAYS required for border layout\r
+ deferredRender: false,\r
+ activeTab: 0, // first tab initially active\r
+ items: [{\r
+ contentEl: 'center1',\r
+ title: 'Close Me',\r
+ closable: true,\r
+ autoScroll: true\r
+ }, {\r
+ contentEl: 'center2',\r
+ title: 'Center Panel',\r
+ autoScroll: true\r
+ }]\r
+ })]\r
});\r
- Ext.get("hideit").on('click', function() {\r
- var w = Ext.getCmp('west-panel');\r
- w.collapsed ? w.expand() : w.collapse(); \r
+ // get a reference to the HTML element with id "hideit" and add a click listener to it \r
+ Ext.get("hideit").on('click', function(){\r
+ // get a reference to the Panel that was created with id = 'west-panel' \r
+ var w = Ext.getCmp('west-panel');\r
+ // expand or collapse that Panel based on its collapsed property state\r
+ w.collapsed ? w.expand() : w.collapse();\r
});\r
});\r
- </script>\r
+ </script>\r
</head>\r
<body>\r
-<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->\r
- <div id="west">\r
- <p>Hi. I'm the west panel.</p>\r
- </div>\r
- <div id="north">\r
- <p>north - generally for menus, toolbars and/or advertisements</p>\r
- </div>\r
- <div id="center2">\r
+ <!-- use class="x-hide-display" to prevent a brief flicker of the content -->\r
+ <div id="west" class="x-hide-display">\r
+ <p>Hi. I'm the west panel.</p>\r
+ </div>\r
+ <div id="center2" class="x-hide-display">\r
<a id="hideit" href="#">Toggle the west region</a>\r
- <p>\r
- My closable attribute is set to false so you can't close me. The other center panels can be closed.</p>\r
+ <p>My closable attribute is set to false so you can't close me. The other center panels can be closed.</p>\r
<p>The center panel automatically grows to fit the remaining space in the container that isn't taken up by the border regions.</p>\r
<hr>\r
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>\r
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>\r
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>\r
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>\r
- </div>\r
- <div id="center1">\r
+ </div>\r
+ <div id="center1" class="x-hide-display">\r
<p><b>Done reading me? Close me by clicking the X in the top right corner.</b></p>\r
<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>\r
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>\r
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>\r
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>\r
- </div>\r
- <div id="props-panel" style="width:200px;height:200px;overflow:hidden;">\r
- </div>\r
- <div id="south">\r
- <p>south - generally for informational stuff, also could be for status bar</p>\r
- </div>\r
-\r
- </body>\r
-</html>\r
+ </div>\r
+ <div id="props-panel" class="x-hide-display" style="width:200px;height:200px;overflow:hidden;">\r
+ </div>\r
+ <div id="south" class="x-hide-display">\r
+
<p>south - generally for informational stuff, also could be for status bar</p>
\r+ </div>\r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff