Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / layout / column.html
diff --git a/examples/layout/column.html b/examples/layout/column.html

index cf6765a..b22ec92 100644 (file)
--- a/examples/layout/column.html
+++ b/examples/layout/column.html
@@ -1,18 +1,9 @@
  <html>
  <head>
  <html>
  <head>
-  <title>Column Layout</title>
-       <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
-
-    <!-- GC -->
-       <!-- LIBS -->
-       <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
-       <!-- ENDLIBS -->
-
-    <script type="text/javascript" src="../../ext-all.js"></script>
-
-    <!--<script language="javascript" src="../grid/PropsGrid.js"></script>-->
-       <style type="text/css">
-       html, body {
+    <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;
          font:normal 12px verdana;
          margin:0;
          padding:0;
@@ -20,9 +11,9 @@
          overflow:hidden;
          height:100%;
      }
          overflow:hidden;
          height:100%;
      }
-       .x-panel-body p {
-           margin:5px;
-       }
+    .x-panel-body p {
+        margin:5px;
+    }
      .x-column-layout-ct .x-panel {
          margin-bottom:5px;
      }
      .x-column-layout-ct .x-panel {
          margin-bottom:5px;
      }
@@ -36,7 +27,10 @@
          background-image:url(../shared/icons/fam/folder_go.png) !important;
      }
      </style>
          background-image:url(../shared/icons/fam/folder_go.png) !important;
      }
      </style>
-       <script type="text/javascript">
+<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(){
  
  
      Ext.onReady(function(){
  
@@ -44,9 +38,9 @@
         // 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.
         // 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(new Ext.state.CookieProvider());
+       Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
  
  
-       var viewport = new Ext.Viewport({
+       var viewport = Ext.create('Ext.Viewport', {
              layout:'border',
              items:[{
                  region:'west',
              layout:'border',
              items:[{
                  region:'west',
@@ -81,8 +75,14 @@
                  margins:'35 5 5 0',
                  layout:'column',
                  autoScroll:true,
                  margins:'35 5 5 0',
                  layout:'column',
                  autoScroll:true,
-                items:[{
-                    columnWidth:.33,
+                defaults: {
+                    layout: 'anchor',
+                    defaults: {
+                        anchor: '100%'
+                    }
+                },
+                items: [{
+                    columnWidth: 1/3,
                      baseCls:'x-plain',
                      bodyStyle:'padding:5px 0 5px 5px',
                      items:[{
                      baseCls:'x-plain',
                      bodyStyle:'padding:5px 0 5px 5px',
                      items:[{
@@ -90,7 +90,7 @@
                          html: Ext.example.shortBogusMarkup
                      }]
                  },{
                          html: Ext.example.shortBogusMarkup
                      }]
                  },{
-                    columnWidth:.33, 
+                    columnWidth: 1/3,
                      baseCls:'x-plain',
                      bodyStyle:'padding:5px 0 5px 5px',
                      items:[{
                      baseCls:'x-plain',
                      bodyStyle:'padding:5px 0 5px 5px',
                      items:[{
@@ -98,7 +98,7 @@
                          html: Ext.example.shortBogusMarkup
                      }]
                  },{
                          html: Ext.example.shortBogusMarkup
                      }]
                  },{
-                    columnWidth:.33,
+                    columnWidth: 1/3,
                      baseCls:'x-plain',
                      bodyStyle:'padding:5px',
                      items:[{
                      baseCls:'x-plain',
                      bodyStyle:'padding:5px',
                      items:[{
@@ -112,9 +112,8 @@
              }]
          });
      });
              }]
          });
      });
-       </script>
+</script>
  </head>
  <body>
  </head>
  <body>
-<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
-  </body>
-</html>
-\ No newline at end of file
+</body>
+</html>