-<html>\r
-<head>\r
- <title>Column Layout</title>\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
- font:normal 12px verdana;\r
- margin:0;\r
- padding:0;\r
- border:0 none;\r
- overflow:hidden;\r
- height:100%;\r
- }\r
- .x-panel-body p {\r
- margin:5px;\r
- }\r
- .x-column-layout-ct .x-panel {\r
- margin-bottom:5px;\r
- }\r
- .x-column-layout-ct .x-panel-dd-spacer {\r
- margin-bottom:5px;\r
- }\r
- .settings {\r
- background-image:url(../shared/icons/fam/folder_wrench.png) !important;\r
- }\r
- .nav {\r
- background-image:url(../shared/icons/fam/folder_go.png) !important;\r
- }\r
- </style>\r
- <script type="text/javascript">\r
-\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
- 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:'35 0 5 5',\r
- cmargins:'35 5 5 5',\r
- layout:'accordion',\r
- layoutConfig:{\r
- animate:true\r
- },\r
- items: [{\r
- html: Ext.example.shortBogusMarkup,\r
- title:'Navigation',\r
- autoScroll:true,\r
- border:false,\r
- iconCls:'nav'\r
- },{\r
- title:'Settings',\r
- html: Ext.example.shortBogusMarkup,\r
- border:false,\r
- autoScroll:true,\r
- iconCls:'settings'\r
- }]\r
- },{\r
- region:'center',\r
- margins:'35 5 5 0',\r
- layout:'column',\r
- autoScroll:true,\r
- items:[{\r
- columnWidth:.33,\r
- baseCls:'x-plain',\r
- bodyStyle:'padding:5px 0 5px 5px',\r
- items:[{\r
- title: 'A Panel',\r
- html: Ext.example.shortBogusMarkup\r
- }]\r
- },{\r
- columnWidth:.33, \r
- baseCls:'x-plain',\r
- bodyStyle:'padding:5px 0 5px 5px',\r
- items:[{\r
- title: 'A Panel',\r
- html: Ext.example.shortBogusMarkup\r
- }]\r
- },{\r
- columnWidth:.33,\r
- baseCls:'x-plain',\r
- bodyStyle:'padding:5px',\r
- items:[{\r
- title: 'A Panel',\r
- html: Ext.example.shortBogusMarkup\r
- },{\r
- title: 'Another Panel',\r
- html: Ext.example.shortBogusMarkup\r
- }]\r
- }]\r
- }]\r
- });\r
- });\r
- </script>\r
-</head>\r
-<body>\r
-<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->\r
- </body>\r
-</html>
\ No newline at end of file
+<html>
+<head>
+ <title>Column Layout</title>
+ <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+ <style type="text/css">
+ html, body {
+ font:normal 12px verdana;
+ margin:0;
+ padding:0;
+ border:0 none;
+ overflow:hidden;
+ height:100%;
+ }
+ .x-panel-body p {
+ margin:5px;
+ }
+ .x-column-layout-ct .x-panel {
+ margin-bottom:5px;
+ }
+ .x-column-layout-ct .x-panel-dd-spacer {
+ margin-bottom:5px;
+ }
+ .settings {
+ background-image:url(../shared/icons/fam/folder_wrench.png) !important;
+ }
+ .nav {
+ background-image:url(../shared/icons/fam/folder_go.png) !important;
+ }
+ </style>
+<script type="text/javascript" src="../../bootstrap.js"></script>
+<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
+<script type="text/javascript">
+Ext.require(['*']);
+
+ Ext.onReady(function(){
+
+ // NOTE: This is an example showing simple state management. During development,
+ // it is generally best to disable state management as dynamically-generated ids
+ // can change across page loads, leading to unpredictable results. The developer
+ // should ensure that stable state ids are set for stateful components in real apps.
+ Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
+
+ var viewport = Ext.create('Ext.Viewport', {
+ layout:'border',
+ items:[{
+ region:'west',
+ id:'west-panel',
+ title:'West',
+ split:true,
+ width: 200,
+ minSize: 175,
+ maxSize: 400,
+ collapsible: true,
+ margins:'35 0 5 5',
+ cmargins:'35 5 5 5',
+ layout:'accordion',
+ layoutConfig:{
+ animate:true
+ },
+ items: [{
+ html: Ext.example.shortBogusMarkup,
+ title:'Navigation',
+ autoScroll:true,
+ border:false,
+ iconCls:'nav'
+ },{
+ title:'Settings',
+ html: Ext.example.shortBogusMarkup,
+ border:false,
+ autoScroll:true,
+ iconCls:'settings'
+ }]
+ },{
+ region:'center',
+ margins:'35 5 5 0',
+ layout:'column',
+ autoScroll:true,
+ defaults: {
+ layout: 'anchor',
+ defaults: {
+ anchor: '100%'
+ }
+ },
+ items: [{
+ columnWidth: 1/3,
+ baseCls:'x-plain',
+ bodyStyle:'padding:5px 0 5px 5px',
+ items:[{
+ title: 'A Panel',
+ html: Ext.example.shortBogusMarkup
+ }]
+ },{
+ columnWidth: 1/3,
+ baseCls:'x-plain',
+ bodyStyle:'padding:5px 0 5px 5px',
+ items:[{
+ title: 'A Panel',
+ html: Ext.example.shortBogusMarkup
+ }]
+ },{
+ columnWidth: 1/3,
+ baseCls:'x-plain',
+ bodyStyle:'padding:5px',
+ items:[{
+ title: 'A Panel',
+ html: Ext.example.shortBogusMarkup
+ },{
+ title: 'Another Panel',
+ html: Ext.example.shortBogusMarkup
+ }]
+ }]
+ }]
+ });
+ });
+</script>
+</head>
+<body>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff