extjs的panel怎么自适应高度

在利用ExtJs经常会遇到窗口放大样式改变，出现多个重复元素对象，面板不随着窗口变化等诸多问题，接下来我们就来一起看看这都是什么原因造成的。

我查询了一些资料，现在就来总结下。一共有三个方面我们先来看图，

这是初始化的界面

出现错误的界面：

红圈表示的地方是出错的地方。

第一种情况：1.在界面中,如果一行有多个GRID,则使用Ext.layout.HBoxLayout,如下图和代码：

var p = new Ext.Panel({

title:'::业务成功率(近4个统计周期)::',

region:'center',

//新的布局方式

layout:{

type:'hbox',

align : 'stretch',

pack : 'start'

defaults:{

//子元素平均分配宽度

flex:1

split:true,

frame:true,

//前面定义的一个Grid数组

items:this.businessGridArr,

tbar:toolbar

});

如果几个Grid需要不同的宽度,则分布给他们设置flex,看源码即知,会把全部的flex总和后求百分比.

2.ExtJS3.0及以前版本

1)利用其他布局管理器,如把grid放到一个fit布局的panel中

2)设置一个高度,然后自己去维护它

如监听grid所在的panel的afterlayout事件,然后获取grid的ownct的高度,从而设置,但是要计算到工具条等占用的宽度。如下代码:

Js代码

//控制缩放的时候修改grid的高度

this.on('afterlayout',function(view,layout){

var height = this.gridPanel.getSize().height - 30;

for(var i=0;i

this.gridArr[i].grid.setHeight(height); //.doLayout()

}

},this);

PS:至于在border布局里面,有north,south,center三个panel, 中间的放置一个grid,

高度不会自适应,是因为border是先计算north和south,然后剩下的空间给center.

依稀记得在extjs论坛有人说过,这种情况下center里面的grid不能自适应宽度,是一个很难修复的bug.

涉及到浏览器问题。

extjs的panel怎么自适应高度_Ext Js自适应高度相关推荐

video.js视频高度自适应解决方法
video.js视频高度自适应解决方法 1.引入两个外部文件,或者下载到本地 <link href="https://unpkg.com/video.js/dist/video-js. ...
extjs给panel添加滚动条_ExtJs Panel 滚动条设置
设置autoscroll:true同时出现横向和纵向滚动条. 不要设置autoscroll属性,或者autoscroll:false,然后设置bodyStyle : 'overflow-x:hidde ...
html 图片高度页面高度自适应,怎样让网页图片高度自适应宽度
[摘要] 你肯定知道width百分比可以实现图片宽度的自适应,那么你知道高度也可以根据宽度变话而自适应比变化么,看下本文就了解了! 当前响应式布局,内容尺寸自适应设备是众多网站开发者的选择,毕竟现在显 ...
H5图片高度根据宽度自适应
每个图片原始宽高不一样,缩小每个图片到指定的宽度,高度等比例缩小,实现图片高度自适应. 下面看看实现代码: 下面是uniapp的条件编译,如果是小程序场景就使用 mode 属性实现高度自适应,如果是H ...
背景平铺两栏自适应（占满剩余高度）fastclick、IScroll双飞翼布局
文章目录背景平铺两栏自适应(占满剩余高度) 需求实现 fastclick插件的使用 IScroll插件的使用(实现区域滚动效果) 条件双飞翼布局(两边固定宽度,中间自适应) 条件实现背景平 ...
python文本框随窗体变化_Javascript 文本框textarea高度随内容自适应增长收缩
直接上代码: 方案一: 枫芸志 » 文本框textarea高度自适应增长/伸缩晴枫制作 http://jb51.net [Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行] 方案一在各浏 ...
php iframe 自适应高度,让iframe自适应高度的讲解
为什么需要使用iframe自适应高度呢?其实就是为了美观,要不然iframe和窗口长短大小不一,看起来总是不那么舒服,特别是对于我们这些编程的来说,如鲠在喉的感觉.在页面中通过iframe嵌入了另外一 ...
【Android 界面效果49】RecyclerView高度随Item自适应
编写RecyclerView.ItemDecoration时,在onDraw方法中,Drawable的高度等于RecyclerView的高度减去RecyclerView的上下padding. @Ove ...
前端页面高度和宽度自适应怎么做？
在前端页面开发中,我们会希望页面可以根据不同用户的显示比例自动缩放页面,确保用户体验,这就是PC自适应,下面小千就来给大家介绍一下应该怎么做和集中常见的问题解决方案,记得收藏起来遇到问题来看一看. 自 ...

extjs的panel怎么自适应高度_Ext Js自适应高度

extjs的panel怎么自适应高度_Ext Js自适应高度相关推荐

最新文章

热门文章