X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6e39d509471fe9b4e2660e0d1631b350d0c66f40..HEAD:/examples/layout/vbox.html

diff --git a/examples/layout/vbox.html b/examples/layout/vbox.html
index bbc6ac52..c8bdaa02 100644
--- 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');
                             }
                         }]
                     }]
