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();