Layout基本功能介紹

1、border布局方式

                 var viewport = new Ext.Viewport({

                     layout: 'border',

                     items: [{

                         region: 'north',

                         height: 40,

                         html: '<h1>www.family168.com出品</h1>'

                     }, {

                         region: 'west',

                         width: 100,

                         html: '<p>菜單1</p><p>菜單2</p>'

                     }, {

                         region: 'center',

                         html: '主要内容'

                     }]

                 });



 2、fit布局方式，僅僅允許一個控件，讓控件進行自适應，通常可與border布局方式結合使用，讓grid進行自适應空間調整

     var viewport = new Ext.Viewport({

         layout: 'fit',

         items: [grid]

     });



 3、border 可以進行調整

     { region: 'west', html: 'west', width: 100, split: true }





 4、border 布局方式可以進行窗體收縮

             { region: 'west', html: 'west', title: 'west', width: 100, collapsible: true }



 5、column 布局方式

     var viewport = new Ext.Viewport({

         layout:'column',

         items: [{

             title: 'Column 1',

             width: 120

         },{

             title: 'Column 2',

             columnWidth: .7

         },{

             title: 'Column 3',

             columnWidth: .3

         }]

     });