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: '系统功能',
split: true,
width: '30%',
minWidth: 100,
maxWidth: 200,
minHeight: 140,
},
{
region: 'center',
layout: 'border',
border: false,
items: [{
region: 'center',
minHeight: 80,

xtype: 'tabpanel',
id: 'maintab',
activeTab: 0,
region: 'center',
layout: {
type: 'fit'
},
items: [
{
xtype: 'panel',
title: 'Welcome',
html: '<br>欢迎使用'
}
]
}]
}]
});

me.callParent(arguments);

}

});

var base = new MyApp.view.MyViewport();
base.show();