Extjs中layout:column的布局,容器大小使用百分比,不能自适应(自动缩放)
在Extjs中,用layout:column的布局,window或panel大小设为百分比,里面的控件不随容器大小而改变(自动缩放)。如下:
·
在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);
}
更多推荐
已为社区贡献1条内容
所有评论(0)