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 //             '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                  '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/p/2515990.html