wangtao
/
fireInternet


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434
							<html>
<head>
    <title>VBox Layout</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="../shared/example.css" />

    <!-- GC -->

    <script type="text/javascript" src="../../ext-all.js"></script>

    <style type="text/css">
        html, body {
            font: normal 12px verdana;
            margin: 0;
            padding: 0;
            border: 0 none;
        }
    </style>
    <script type="text/javascript">
        Ext.onReady(function() {
            var currentName;
            var replace = function(config, name) {
                var btns = Ext.getCmp('btns');
                if (name && name != currentName) {
                    currentName = name;
                    btns.remove(0);
                    btns.add(Ext.apply(config));
                }
            };

            var viewport = Ext.create('Ext.Viewport', {
                layout:'border',

                items: [{
                    id:'btns',
                    region:'west',
                    baseCls:'x-plain',
                    split:true,
                    width:150,
                    minWidth: 100,
                    maxWidth: 250,
                    layout:'fit',
                    margins: '5 0 5 5',
                    items: {
                        baseCls: 'x-plain',
                        html: '<p style="padding:10px;color:#556677;font-size:11px;">Select a configuration to the right &raquo;</p>'
                    }
               }, {
                    region:'center',
                    margins: '5 5 5 0',
                    layout: 'anchor',
                    items:[{
                        anchor: '100%',
                        baseCls:'x-plain',
                        layout: {
                            type:'hbox',
                            padding: 10
                        },
                        defaults:{
                            margins:'0 5 0 0',
                            pressed: false,
                            toggleGroup:'btns',
                            allowDepress: false
                        },
                        items: [{
                            xtype:'button',
                            text: 'Spaced / Align: left',
                            handler: function(){
                                replace({
                                    layout: {
                                        type:'vbox',
                                        padding:'5',
                                        align:'left'
                                    },
                                    defaults:{margins:'0 0 5 0'},
                                    items:[{
                                        xtype:'button',
                                        text: 'Button 1'
                                    },{
                                        xtype:'tbspacer',
                                        flex:1
                                    },{
                                        xtype:'button',
                                        text: 'Button 2'
                                    },{
                                        xtype:'button',
                                        text: 'Button 3'
                                    },{
                                        xtype:'button',
                                        text: 'Button 4',
                                        margins:'0'
                                    }]
                                }, 'spaced');
                            }
                        },{
                            xtype:'button',
                            text: 'Multi-Spaced / Align: left',
                            handler: function(){
                                replace({
                                    layout: {
                                        type:'vbox',
                                        padding:'5',
                                        align:'left'
                                    },
                                    defaults:{margins:'0 0 5 0'},
                                    items:[{
                                        xtype:'button',
                                        text: 'Button 1'
                                    },{
                                        xtype:'tbspacer',
                                        flex:1
                                    },{
                                        xtype:'button',
                                        text: 'Button 2'
                                    },{
                                        xtype:'tbspacer',
                                        flex:1
                                    },{
                                        xtype:'button',
                                        text: 'Button 3'
                                    },{
                                        xtype:'tbspacer',
                                        flex:1
                                    },{
                                        xtype:'button',
                                        text: 'Button 4',
                                        margins:'0'
                                    }]
                                }, 'multi spaced - align left');
                            }
                        },{
                            xtype:'button',
                            text: 'Align: left',
                            handler: function(){
                                replace({
                                    layout: {
                                        type:'vbox',
                                        padding:'5',
                                        align:'left'
                                    },
                                    defaults:{margins:'0 0 5 0'},
                                    items:[{
                                        xtype:'button',
                                        text: 'Button 1'
                                    },{
                                        xtype:'button',
                                        text: 'Button 2'
                                    },{
                                        xtype:'button',
                                        text: 'Button 3'
                                    },{
                                        xtype:'button',
                                        text: 'Button 4'
                                    }]
                                }, 'align left');
                            }
                        },{
                            xtype:'button',
                            text: 'Align: center',
                            handler: function(){
                                replace({
                                    layout: {
                                        type:'vbox',
                                        padding:'5',
                                        align:'center'
                                    },
                                    defaults:{margins:'0 0 5 0'},
                                    items:[{
                                        xtype:'button',
                                        text: 'Button 1'
                                    },{
                                        xtype:'button',
                                        text: 'Button 2'
                                    },{
                                        xtype:'button',
                                        text: 'Button 3'
                                    },{
                                        xtype:'button',
                                        text: 'Button 4'
                                    }]
                                }, 'align center');
                            }
                        },{
                            xtype:'button',
                            text: 'Align: stretch',
                            handler: function(){
                                replace({
                                    layout: {
                                        type:'vbox',
                                        padding:'5',
                                        align:'stretch'
                                    },
                                    defaults:{margins:'0 0 5 0'},
                                    items:[{
                                        xtype:'button',
                                        text: 'Button 1'
                                    },{
                                        xtype:'button',
                                        text: 'Button 2'
                                    },{
                                        xtype:'button',
                                        text: 'Button 3'
                                    },{
                                        xtype:'button',
                                        text: 'Button 4'
                                    }]
                                }, 'align stretch');
                            }
                        },{
                            xtype:'button',
                            text: 'Align: stretchmax',
                            handler: function(){
                                replace({
                                    layout: {
                                        type:'vbox',
                                        padding:'5',
                                        align:'stretchmax'
                                    },
                                    defaults:{margins:'0 0 5 0'},
                                    items:[{
                                        xtype:'button',
                                        text: 'Jamie'
                                    },{
                                        xtype:'button',
                                        text: 'Aaron'
                                    },{
                                        xtype:'button',
                                        text: 'Tommy'
                                    },{
                                        xtype:'button',
                                        text: 'Ed '
                                    }]
                                }, 'align stretchmax');
                            }
                        }]
                    },{
                        anchor: '100%',
                        baseCls:'x-plain',
                        layout: {
                            type:'hbox',
                            padding: '0 10 10'
                        },
                        defaults:{
                            margins:'0 5 0 0',
                            pressed: false,
                            toggleGroup:'btns',
                            allowDepress: false
                        },
                        items: [{
                            xtype:'button',
                            text: 'Flex: Even / Align: center',
                            handler: function(){
                                replace({
                                    layout: {
                                        type:'vbox',
                                        padding:'5',
                                        align:'center'
                                    },
                                    defaults:{margins:'0 0 5 0'},
                                    items:[{
                                        xtype:'button',
                                        text: 'Button 1',
                                        flex:1
                                    },{
                                        xtype:'button',
                                        text: 'Button 2',
                                        flex:1
                                    },{
                                        xtype:'button',
                                        text: 'Button 3',
                                        flex:1
                                    },{
                                        xtype:'button',
                                        text: 'Button 4',
                                        flex:1,
                                        margins:'0'
                                    }]
                                }, 'align flex even');
                            }
                        },{
                            xtype:'button',
                            text: 'Flex: Ratio / Align: center',
                            handler: function(){
                                replace({
                                    layout: {
                                        type:'vbox',
                                        padding:'5',
                                        align:'center'
                                    },
                                    defaults:{margins:'0 0 5 0'},
                                    items:[{
                                        xtype:'button',
                                        text: 'Button 1',
                                        flex:1
                                    },{
                                        xtype:'button',
                                        text: 'Button 2',
                                        flex:1
                                    },{
                                        xtype:'button',
                                        text: 'Button 3',
                                        flex:1
                                    },{
                                        xtype:'button',
                                        text: 'Button 4',
                                        flex:3,
                                        margins:'0'
                                    }]
                                }, 'align flex ratio');
                            }
                        },{
                            xtype:'button',
                            text: 'Flex + Stretch',
                            handler: function(){
                                replace({
                                    layout: {
                                        type:'vbox',
                                        padding:'5',
                                        align:'stretch'
                                    },
                                    defaults:{margins:'0 0 5 0'},
                                    items:[{
                                        xtype:'button',
                                        text: 'Button 1',
                                        flex:1
                                    },{
                                        xtype:'button',
                                        text: 'Button 2',
                                        flex:1
                                    },{
                                        xtype:'button',
                                        text: 'Button 3',
                                        flex:1
                                    },{
                                        xtype:'button',
                                        text: 'Button 4',
                                        flex:3,
                                        margins:'0'
                                    }]
                                }, 'align flex + stretch');
                            }
                        },{
                            xtype:'button',
                            text: 'Pack: start / Align: center',
                            handler: function(){
                                replace({
                                    layout: {
                                        type:'vbox',
                                        padding:'5',
                                        pack:'start',
                                        align:'center'
                                    },
                                    defaults:{margins:'0 0 5 0'},
                                    items:[{
                                        xtype:'button',
                                        text: 'Button 1'
                                    },{
                                        xtype:'button',
                                        text: 'Button 2'
                                    },{
                                        xtype:'button',
                                        text: 'Button 3'
                                    },{
                                        xtype:'button',
                                        text: 'Button 4'
                                    }]
                                }, 'align pack start + align center');
                            }
                        },{
                            xtype:'button',
                            text: 'Pack: center / Align: center',
                            handler: function(){
                                replace({
                                    layout: {
                                        type:'vbox',
                                        padding:'5',
                                        pack:'center',
                                        align:'center'
                                    },
                                    defaults:{margins:'0 0 5 0'},
                                    items:[{
                                        xtype:'button',
                                        text: 'Button 1'
                                    },{
                                        xtype:'button',
                                        text: 'Button 2'
                                    },{
                                        xtype:'button',
                                        text: 'Button 3'
                                    },{
                                        xtype:'button',
                                        text: 'Button 4',
                                        margins:'0'
                                    }]
                                }, 'align pack center + align center');
                            }
                        },{
                            xtype:'button',
                            text: 'Pack: end / Align: center',
                            handler: function(){
                                replace({
                                    layout: {
                                        type:'vbox',
                                        padding:'5',
                                        pack:'end',
                                        align:'center'
                                    },
                                    defaults:{margins:'0 0 5 0'},
                                    items:[{
                                        xtype:'button',
                                        text: 'Button 1'
                                    },{
                                        xtype:'button',
                                        text: 'Button 2'
                                    },{
                                        xtype:'button',
                                        text: 'Button 3'
                                    },{
                                        xtype:'button',
                                        text: 'Button 4',
                                        margins:'0'
                                    }]
                                }, 'align pack end + align center');
                            }
                        }]
                    }]
                }]
            });
        });
    </script>
</head>
<body>
</body>
</html>