ExtJS大小随浏览器窗口大小曲整自适应

ExtJS大小随浏览器窗口大小调整自适应
第一种情况：Panel里嵌套两个panel可以设置layout为vbox，然后在item配置里，可以用flex:来指定两个子panel的比例大小。

Ext.define('My.view.b.Main', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.bmain',
        //height:'100%',
        layout:{
                type:'vbox',
                align:'center',
        },
    initComponent: function(){
        this.items = [{
                        xtype: 'bform',
                        width:'100%',
                        flex:1
                },{
                        xtype: 'blist',
                        width:'100%',
                        flex:4
                }];
        this.callParent(arguments);
    }
});

第二种情况：Panel里嵌套两个panel，但是某一个panel需要固定高度。同样设置父Panel的layout为vbox，但是必须同时设定其height属性为‘100%’，在item配置里，设置第一个panel的height为固定值（比如说100），然后需要（在该view对应的controller里）添加afterrender事件，在该事件函数里动态指定另一个panel的大小。
主Panel定义：

Ext.define('My.view.b.Main', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.bmain',
        height:'100%',
        layout:{
                type:'vbox',
                align:'center',
        },
    initComponent: function(){
        this.items = [{
                        xtype: 'bform',
                        width:'100%',
                        height:125
                        //flex:1
                },{
                        xtype: 'blist',
                        width:'100%',
                        //flex:4
                }];
        this.callParent(arguments);
    }
});

对应的BController.js

 
          refs:[
                {
                        selector:'bmain',
                        ref:'bMain'
                },{
                        selector:'blist',
                        ref:'bList',
                }
        ],

        init:function(){
                this.control({
                        'blist':{
                                afterrender:this.setListHeight
                        },
                });
        },
        setListHeight: function(me, opts){
                me.setHeight(this.getBMain().getSize().height - 135);
        },

但是上述第二个方法只有在加载页面的时候进行自适应，加载完后如果再调整窗口大小List并不会随着窗口大小改变而自动调整。
解决方法：
在BController.js中为主Panel加一个resize事件函数，该函数在主Panel大小调整的时候触发，让该事件触发一个类似setListHeight（）的函数即可使List大小随着浏览器窗口的大小调整而自动调整（自适应）

       resizeListHeight: function(me, width, height, oldwidth, oldheight ){
                this.getBList().setHeight(height-135);
        },

ExtJS大小随浏览器窗口大小曲整自适应

相关推荐