做了一个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();
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();