extjs 创建viewport的方式不同，导致页面中的控件没有撑满

做了一个viewport的布局，在west中间加了一个panel，用下面没有注释的代码执行，会导致如图所示的现象，

panel的标题栏没有撑满，将浏览器的尺寸改变一下后，才可以撑满。

但用注释部分的代码，没有这个问题发生。原因可能是JS执行的时间同，获得浏览器的尺寸有问题 。

 

  1  // Ext.onReady(function() {
  2  //     //var cw;
  3  //     
  4  //     Ext.create('Ext.Viewport', {
  5  //         layout: {
  6  //             type: 'border',
  7  //             padding: 0
  8  //         },
  9  //         items: [{
 10  //             region: 'north',
 11  //             height: 98,
 12  //             layout: 'border',
 13  //              items: [
 14  //                         {
 15  //                             xtype: 'panel',
 16  //                             bodyStyle: 'background-image:url(resources/images/head.png)',
 17  //                             region: 'center'
 18  //                         },
 19  //                         {
 20  //                             xtype: 'toolbar',
 21  //                             id:'tb',
 22  //                             height: 30,
 23  //                             region: 'south'
 24  //                         }
 25  //                     ]
 26  //         },
 27  //         {
 28  //             region: 'west',
 29  //             collapsible: true,
 30  //             title: '系统功能',
 31  //             split: true,
 32  //             width: '30%',
 33  //             minWidth: 100,
 34  //             maxWidth: 200,
 35  //             minHeight: 140,
 36  //         },
 37  //         {
 38  //             region: 'center',
 39  //             layout: 'border',
 40  //             border: false,
 41  //             items: [{
 42  //                 region: 'center',
 43  //                 minHeight: 80,
 44  //                 
 45  //                 xtype: 'tabpanel',
 46  //                 id: 'maintab',
 47  //                 activeTab: 0,
 48  //                 region: 'center',
 49  //                 layout: {
 50  //                     type: 'fit'
 51  //                 },
 52  //                 items: [
 53  //                     {
 54  //                         xtype: 'panel',
 55  //                         title: 'Welcome',
 56  //                         html: '<br>欢迎使用'
 57  //                     }
 58  //                 ]
 59  //             }]
 60  //         }]
 61  //     });
 62  // });
 63 
 64 
 65 
 66 Ext.define('MyApp.view.MyViewport', {
 67     extend: 'Ext.container.Viewport',
 68 
 69     layout: {
 70             type: 'border',
 71             padding: 0
 72         },
 73 
 74     initComponent:  function() {
 75          var me =  this;
 76 
 77         Ext.applyIf(me, {
 78              items: [{
 79                 region: 'north',
 80                 height: 98,
 81                 layout: 'border',
 82                  items: [
 83                             {
 84                                 xtype: 'panel',
 85                                 bodyStyle: 'background-image:url(resources/images/head.png)',
 86                                 region: 'center'
 87                             },
 88                             {
 89                                 xtype: 'toolbar',
 90                                 id:'tb',
 91                                 height: 30,
 92                                 region: 'south'
 93                             }
 94                         ]
 95             },
 96             {
 97                 region: 'west',
 98                 collapsible:  true,
 99                 title: '系统功能',
100                 split:  true,
101                 width: '30%',
102                 minWidth: 100,
103                 maxWidth: 200,
104                 minHeight: 140,
105             },
106             {
107                 region: 'center',
108                 layout: 'border',
109                 border:  false,
110                 items: [{
111                     region: 'center',
112                     minHeight: 80,
113                     
114                     xtype: 'tabpanel',
115                     id: 'maintab',
116                     activeTab: 0,
117                     region: 'center',
118                     layout: {
119                         type: 'fit'
120                     },
121                     items: [
122                         {
123                             xtype: 'panel',
124                             title: 'Welcome',
125                             html: '<br>欢迎使用'
126                         }
127                     ]
128                 }]
129             }]
130         });
131 
132         me.callParent(arguments);
133         
134     }
135 
136 });
137 
138  var base =  new MyApp.view.MyViewport();
139 base.show();

 

 

 

转载于:https://www.cnblogs.com/baishahe/archive/2012/05/24/2515990.html