Extjs中layout:column的布局，容器大小使用百分比，不能自适应（自动缩放）

来源：互联网发布：iphone蜂窝数据3g 编辑：程序博客网时间：2024/04/30 23:29

在Extjs中，用layout:column的布局，window或panel大小设为百分比，里面的控件不随容器大小而改变（自动缩放）。

如下：

            <link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all.css" />            <script type="text/javascript" src="./extjs/adapter/ext/ext-base.js"></script>            <script type="text/javascript" src="./extjs/ext-all-debug.js"></script>            <script type="text/javascript" src="./extjs/examples.js"></script>            <script type="text/javascript">                Ext.onReady(function(){                    Ext.QuickTips.init();                    new Ext.FormPanel({                        renderTo:document.body,frame:true,id:'twindow',                        title: '布局测试',labelAlign: 'right',                        plain:true,layout:"form",                        items: [{layout:"column",baseCls:"x-plain",style:"padding:5px",                                items:[{columnWidth:.5,layout: 'form',                                        items: [{                                                xtype:'textfield',                                                fieldLabel: 'First Name',                                                name: 'first',                                                anchor:'95%'                                            }, {                                                xtype:'textfield',                                                fieldLabel: 'Company',                                                name: 'company',                                                anchor:'95%'                                            }]                                    },{columnWidth:.5,layout: 'form',                                        items: [{                                                xtype:'textfield',                                                fieldLabel: 'Last Name',                                                name: 'last',                                                anchor:'95%'                                            },{                                                xtype:'textfield',                                                fieldLabel: 'Email',                                                name: 'email',                                                vtype:'email',                                                anchor:'95%'                                            }]                                    }]                            }],                        buttons: [{text: 'Save'},{text: 'Cancel'}]                    });                });            </script>

解决方式如下：

在

                });            </script>

前加入下面代码

                    window.onresize = function() {                        var myWidth = 0, myHeight = 0;                        if (typeof (window.innerWidth) == 'number') {                            //Non-IE                            myWidth = window.innerWidth;                            myHeight = window.innerHeight;                        } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {                            //IE 6+ in 'standards compliant mode'                            myWidth = document.documentElement.clientWidth;                            myHeight = document.documentElement.clientHeight;                        } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {                            //IE 4 compatible                            myWidth = document.body.clientWidth;                            myHeight = document.body.clientHeight;                        }                        var w = Ext.getCmp('twindow');                        w.setPosition(0, 0);                        w.setWidth(myWidth);                        //w.setSize(myWidth, myHeight);                    }