Upgrade to ExtJS 3.2.0 - Released 03/30/2010
[extjs.git] / examples / layout / vbox.html
index bbc6ac5..46f4667 100644 (file)
     </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);
-
+                
+                if (name && name != currentName) {
+                    currentName = name;
+                    
+                    btns.remove(0);
+                
+                    btns.add(config);
+                };
+                
+                // console.profile();
+                
                 btns.doLayout();
+                // console.profileEnd();
             }
 
 
                                         text: 'Button 4',
                                         margins:'0'
                                     }]
-                                });
+                                }, 'spaced');
                             }
                         },{
                             xtype:'button',
                                         text: 'Button 4',
                                         margins:'0'
                                     }]
-                                });
+                                }, 'multi spaced - align left');
                             }
                         },{
                             xtype:'button',
                                         xtype:'button',
                                         text: 'Button 4'
                                     }]
-                                });
+                                }, 'align left');
                             }
                         },{
                             xtype:'button',
                                         xtype:'button',
                                         text: 'Button 4'
                                     }]
-                                });
+                                }, 'align center');
                             }
                         },{
                             xtype:'button',
                                         xtype:'button',
                                         text: 'Button 4'
                                     }]
-                                });
+                                }, 'align stretch');
                             }
                         },{
                             xtype:'button',
                                         xtype:'button',
                                         text: 'Button 4'
                                     }]
-                                });
+                                }, 'align stretchmax');
                             }
                         }]
                     },{
                                         flex:1,
                                         margins:'0'
                                     }]
-                                });
+                                }, 'align flex even');
                             }
                         },{
                             xtype:'button',
                                         flex:3,
                                         margins:'0'
                                     }]
-                                });
+                                }, 'align flex ratio');
                             }
                         },{
                             xtype:'button',
                                         flex:3,
                                         margins:'0'
                                     }]
-                                });
+                                }, 'align flex + stretch');
                             }
                         },{
                             xtype:'button',
                                         xtype:'button',
                                         text: 'Button 4'
                                     }]
-                                });
+                                }, 'align pack start + align center');
                             }
                         },{
                             xtype:'button',
                                         text: 'Button 4',
                                         margins:'0'
                                     }]
-                                });
+                                }, 'align pack center + align center');
                             }
                         },{
                             xtype:'button',
                                         text: 'Button 4',
                                         margins:'0'
                                     }]
-                                });
+                                }, 'align pack end + align center');
                             }
                         }]
                     }]