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

     

     

  • 相关阅读:
    第一期站立会议7(11.21 个人)
    第一期站立会议6(11.20 个人)
    第一期站立会议5(11.19个人)
    第一期站立会议4(11.18个人)
    第一期站立会议3(11.17个人)
    第一期站立会议2(11.16个人)
    第一期站立会议1(11.15 个人)
    第二阶段第三次站立会议
    对第一阶段提出意见的总结及改进方案
    第二阶段第二次站立会议
  • 原文地址:https://www.cnblogs.com/baishahe/p/2515990.html
Copyright © 2020-2023  润新知