ext的学习笔记3-layout(二)

更高级的布局管理
             layout = new Ext.BorderLayout(document.body, {
                 north: {
                     split:false,
                     initialSize: 25,
                     titlebar: false
                 },
                 west: {
                     split:true,
                     initialSize: 200,
                     minSize: 175,
                     maxSize: 400,
                     titlebar: true,
                     collapsible: true,
                     animate: true,
                     autoScroll:false,
                     useShim:true,                                         //使用薄片
                     cmargins: {top:0,bottom:2,right:2,left:2}                 //设定页边空白
                 },
                 east: {
                     split:true,
                     initialSize: 200,
                     minSize: 175,
                     maxSize: 400,
                     titlebar: true,
                     collapsible: true,
                     animate: true,
                     autoScroll:false,
                     useShim:true,
                     collapsed:true,
                     cmargins: {top:0,bottom:2,right:2,left:2}
                 },
                 south: {
                     split:false,
                     initialSize: 22,
                     titlebar: false,
                     collapsible: false,
                     animate: false
                 },
                 center: {
                     titlebar: false,
                     autoScroll:false,
                     tabPosition: 'top',                                         //tab位置 只能选择在顶部
                     closeOnTab: true,                                        
                     alwaysShowTabs: true,                                 //总是显示tabs
                     resizeTabs: true                                         //更改tab位置
                 }
             });
             // tell the layout not to perform layouts until we're done adding everything
             layout.beginUpdate();
             layout.add('north', new Ext.ContentPanel('header'));
            
             // initialize the statusbar
             statusPanel = new Ext.ContentPanel('status');
             south = layout.getRegion('south');                                 //布局的获得区域方法
             south.add(statusPanel);                                         //在区域中添加内容的方法
            
             // create the add feed toolbar
             var feedtb = new Ext.Toolbar('myfeeds-tb');                         //创建了一个工具栏引用
             // They can also be referenced by id in or components
             feedtb.add( {                                                 //为工具栏添加一个元素
               id:'add-feed-btn',                                                         //id
               icon: 'images/add-feed.gif', // icons can also be specified inline         //图标
               cls: 'x-btn-text-icon',                                                         //样式
               text: 'Add feed',                                                                 //文字
               handler: this.showAddFeed.createDelegate(this),                                 //动作句柄
               tooltip: '<b>Add Feed</b><br/>Button with tooltip'                         //工具条内容
           });            
            
             layout.add('west', new Ext.ContentPanel('feeds', {title: 'My Feeds', fitToFrame:true, toolbar: feedtb, resizeEl:'myfeeds-body'}));
             layout.add('east', new Ext.ContentPanel('suggested', {title: 'Suggested Feeds', fitToFrame:true}));
            
             // the inner layout houses the grid panel and the preview panel
             var innerLayout = new Ext.BorderLayout('main', {
                 south: {
                     split:true,
                     initialSize: 250,
                     minSize: 100,
                     maxSize: 400,
                     autoScroll:false,
                     collapsible:true,
                     titlebar: true,
                     animate: true,
                     cmargins: {top:2,bottom:0,right:0,left:0}
                 },
                 center: {
                     autoScroll:false,
                     titlebar:false
                 }
             });
             // add the nested layout
             feedPanel = new Ext.NestedLayoutPanel(innerLayout, 'View Feed');
             layout.add('center', feedPanel);
            
             innerLayout.beginUpdate();
            
             var lv = innerLayout.add('center', new Ext.ContentPanel('feed-grid', {title: 'Feed Articles', fitToFrame:true}));
             this.createView(lv.getEl());
            
             // create the preview panel and toolbar
             previewBody = Ext.get('preview-body');
             var tb = new Ext.Toolbar('preview-tb');
            
             tb.addButton({text: 'View in New Tab',icon: 'images/new_tab.gif',cls: 'x-btn-text-icon', handler: this.showInTab.createDelegate(this)});
             tb.addSeparator();
             tb.addButton({text: 'View in New Window',icon: 'images/new_window.gif',cls: 'x-btn-text-icon', handler: this.showInWindow.createDelegate(this)});
            
             preview = new Ext.ContentPanel('preview', {title: "review", fitToFrame:true, toolbar: tb, resizeEl:'preview-body'});
             innerLayout.add('south', preview);
            
             // restore innerLayout state
             innerLayout.restoreState();
             innerLayout.endUpdate(true);
            
             // restore any state information
             layout.restoreState();
             layout.endUpdate();