Upgrade to ExtJS 4.0.0 - Released 04/26/2011

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

index bbc6ac5..c8bdaa0 100644 (file)
--- a/examples/layout/vbox.html
+++ b/examples/layout/vbox.html
@@ -1,14 +1,9 @@
  <html>
  <head>
      <title>VBox 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>
+    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
+    <link rel="stylesheet" type="text/css" href="../shared/example.css" />
+    <script type="text/javascript" src="../../bootstrap.js"></script>
  
      <style type="text/css">
          html, body {
@@ -20,17 +15,17 @@
      </style>
      <script type="text/javascript">
          Ext.onReady(function() {
-
-            var replace = function(config){
+            var currentName;
+            var replace = function(config, name) {
                  var btns = Ext.getCmp('btns');
-                btns.remove(0);
-                btns.add(config);
-
-                btns.doLayout();
-            }
-
+                if (name && name != currentName) {
+                    currentName = name;
+                    btns.remove(0);
+                    btns.add(Ext.apply(config));
+                }
+            };
  
-            var viewport = new Ext.Viewport({
+            var viewport = Ext.create('Ext.Viewport', {
                  layout:'border',
  
                  items: [{
@@ -79,7 +74,7 @@
                                          xtype:'button',
                                          text: 'Button 1'
                                      },{
-                                        xtype:'spacer',
+                                        xtype:'tbspacer',
                                          flex:1
                                      },{
                                          xtype:'button',
@@ -92,7 +87,7 @@
                                          text: 'Button 4',
                                          margins:'0'
                                      }]
-                                });
+                                }, 'spaced');
                              }
                          },{
                              xtype:'button',
@@ -109,26 +104,26 @@
                                          xtype:'button',
                                          text: 'Button 1'
                                      },{
-                                        xtype:'spacer',
+                                        xtype:'tbspacer',
                                          flex:1
                                      },{
                                          xtype:'button',
                                          text: 'Button 2'
                                      },{
-                                        xtype:'spacer',
+                                        xtype:'tbspacer',
                                          flex:1
                                      },{
                                          xtype:'button',
                                          text: 'Button 3'
                                      },{
-                                        xtype:'spacer',
+                                        xtype:'tbspacer',
                                          flex:1
                                      },{
                                          xtype:'button',
                                          text: 'Button 4',
                                          margins:'0'
                                      }]
-                                });
+                                }, 'multi spaced - align left');
                              }
                          },{
                              xtype:'button',
@@ -154,7 +149,7 @@
                                          xtype:'button',
                                          text: 'Button 4'
                                      }]
-                                });
+                                }, 'align left');
                              }
                          },{
                              xtype:'button',
@@ -180,7 +175,7 @@
                                          xtype:'button',
                                          text: 'Button 4'
                                      }]
-                                });
+                                }, 'align center');
                              }
                          },{
                              xtype:'button',
@@ -206,7 +201,7 @@
                                          xtype:'button',
                                          text: 'Button 4'
                                      }]
-                                });
+                                }, 'align stretch');
                              }
                          },{
                              xtype:'button',
@@ -221,18 +216,18 @@
                                      defaults:{margins:'0 0 5 0'},
                                      items:[{
                                          xtype:'button',
-                                        text: 'Button 1'
+                                        text: 'Jamie'
                                      },{
                                          xtype:'button',
-                                        text: 'Button 2'
+                                        text: 'Aaron'
                                      },{
                                          xtype:'button',
-                                        text: 'Button 3'
+                                        text: 'Tommy'
                                      },{
                                          xtype:'button',
-                                        text: 'Button 4'
+                                        text: 'Ed '
                                      }]
-                                });
+                                }, 'align stretchmax');
                              }
                          }]
                      },{
@@ -277,7 +272,7 @@
                                          flex:1,
                                          margins:'0'
                                      }]
-                                });
+                                }, 'align flex even');
                              }
                          },{
                              xtype:'button',
@@ -308,7 +303,7 @@
                                          flex:3,
                                          margins:'0'
                                      }]
-                                });
+                                }, 'align flex ratio');
                              }
                          },{
                              xtype:'button',
@@ -339,7 +334,7 @@
                                          flex:3,
                                          margins:'0'
                                      }]
-                                });
+                                }, 'align flex + stretch');
                              }
                          },{
                              xtype:'button',
@@ -366,7 +361,7 @@
                                          xtype:'button',
                                          text: 'Button 4'
                                      }]
-                                });
+                                }, 'align pack start + align center');
                              }
                          },{
                              xtype:'button',
@@ -394,7 +389,7 @@
                                          text: 'Button 4',
                                          margins:'0'
                                      }]
-                                });
+                                }, 'align pack center + align center');
                              }
                          },{
                              xtype:'button',
@@ -422,7 +417,7 @@
                                          text: 'Button 4',
                                          margins:'0'
                                      }]
-                                });
+                                }, 'align pack end + align center');
                              }
                          }]
                      }]