日期:2014-05-16  浏览次数:20382 次

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);
        },