MyException - 我的异常网
当前位置:我的异常网» JavaScript » ExtJS大小随浏览器窗口大小曲整自适应

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

www.MyException.Cn  网友分享于:2013-09-09  浏览:82次
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);
        },

文章评论

编程语言是女人
编程语言是女人
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
Java程序员必看电影
Java程序员必看电影
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
一个程序员的时间管理
一个程序员的时间管理
我的丈夫是个程序员
我的丈夫是个程序员
程序员和编码员之间的区别
程序员和编码员之间的区别
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
那些争议最大的编程观点
那些争议最大的编程观点
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
老程序员的下场
老程序员的下场
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
程序员应该关注的一些事儿
程序员应该关注的一些事儿
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
鲜为人知的编程真相
鲜为人知的编程真相
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
如何成为一名黑客
如何成为一名黑客
每天工作4小时的程序员
每天工作4小时的程序员
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
中美印日四国程序员比较
中美印日四国程序员比较
程序员的鄙视链
程序员的鄙视链
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
我是如何打败拖延症的
我是如何打败拖延症的
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
 程序员的样子
程序员的样子
程序员必看的十大电影
程序员必看的十大电影
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
程序员都该阅读的书
程序员都该阅读的书
旅行,写作,编程
旅行,写作,编程
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有