Ext TabPanel items高度宽度自适应
写Ext的时候经常会遇到一些莫名其妙,令人感到非常神奇的问题,甚至都没办法用语言去描述它,搞的人想请教一下百度或Google都不知道该去怎么问,简直能够令人发疯。
先来看张截图吧。
有没有注意到里面的GridPanel很难看?因为它被它外面的那个Panel给“压迫”了,它伸展不开,呵呵。接着看看当前的JS代码。
Ext.onReady(function(){
vargrid=newExt.grid.GridPanel({ columns:[ {header:'商品编号'},
{header:'商品名称'},
{header:'商品单价'},
{header:'订购数量'},
{header:'合计'}
],
store:newExt.data.JsonStore({}),
bbar:newExt.PagingToolbar({})
});
varpanel=newExt.Panel({ items:[{ autoHeight:true,
contentEl:'topPanel'
},{ xtype:'tabpanel',
activeTab:0,
items:[{ title:'商品明细',
items:grid
},{ title:'会员资料'
},{ title:'收货人信息'
},{ title:'寄件人信息'
},{ title:'发票信息'
}]
}]
})
})
怎么改呢?如果我为GridPanel的高度宽度设置一个死值问题肯定是可以解决的,但是这样无法适应不同的分辨率及浏览器的大小。这是autoHeight为true没用,在它的bodyStyle中设置高度为100%也同样没用。GridPanel有一个viewConfig配置选项,如果它的父容器(商品明细)的layout为fit,那么可以通过设置viewConfig的forceFit为true使它占满父容器。
GridPanel修改成这样:
vargrid=newExt.grid.GridPanel({ columns:[ {header:'商品编号'},
{header:'商品名称'},
{header:'商品单价'},
{header:'订购数量'},
{header:'合计'}
],
viewConfig:{
forceFit:true
},
store:newExt.data.JsonStore({}),
bbar:newExt.PagingToolbar({})
});
它所在的Panel修改成这样:
{
title:'商品明细',
layout:'fit',
items:grid
}
清空缓存,刷新一下,晕了,还是没变。%>_<%
为什么还是不行呢?其实GridPanel已经占满它的父容器了,问题是它的父容器并没有占满其自身的父容器(就是TabPanel)。接着修改,设置panel的layout为border,令其顶部panel的region为north,而tabpanel的region则为center,这样就都填充满了。

Ext TabPanel
完整代码如下:
Ext.onReady(function(){
vargrid=newExt.grid.GridPanel({ columns:[ {header:'商品编号'},
{header:'商品名称'},
{header:'商品单价'},
{header:'订购数量'},
{header:'合计'}
],
viewConfig:{
forceFit:true
},
store:newExt.data.JsonStore({}),
bbar:newExt.PagingToolbar({})
});
varpanel=newExt.Panel({ layout:'border',
items:[{ region:'north',
autoHeight:true,
contentEl:'topPanel'
},{ region:'center',
xtype:'tabpanel',
activeTab:0,
items:[{ title:'商品明细',
layout:'fit',
items:grid
},{ title:'会员资料'
},{ title:'收货人信息'
},{ title:'寄件人信息'
},{ title:'发票信息'
}]
}]
})
})
Ext TabPanel items高度宽度自适应的更多相关文章
- ECharts 高度宽度自适应(转载)
最近在写一个地图类的应用,用的是echarts的图表,然而一上来就一脸懵逼,如果父级容器的height/width属性设置为百分比的形式,那么echarts就会warning,且不能正常的生成图表.所 ...
- CSS学习笔记(6)--浮动,三列布局,高度宽度自适应
百度ife任务三,要求中间宽度自适应,高度取三列最高者. 开始用position的relative和absolute,但是relative不能自适应宽,absolute不能加float浮动,撑不起来外 ...
- iframe高度宽度自适应(转)
http://www.cnblogs.com/snandy/p/3900016.html 跨子域的iframe高度自适应 完全跨域的iframe高度自适应 同域的我们可以轻松的做到 1. 父页面通过i ...
- iframe高度/宽度自适应(使用body而不是docuemntElement对象)
iframe在ie11中会显示过于短.为了自适应,增加如下代码: <iframe *** onload='changeFrameHeight()' > <script> fun ...
- iframe高度宽度自适应
iframe { width: 100%; height: 100%; border: none; position: inherit; } 网上全是js方法,而且略显臃肿,故找到了一个css方法,宽 ...
- iframe 高度宽度自适应
<iframe id="iframeHome" name="iframeHome" src="/Page/NewHome/GongZuoTai. ...
- 【接上一篇】winform中dataGridView高度和宽度自适应填充完数据的高度和宽度,即dataGridView根据数据自适应大小
上一篇:winform中dataGridView高度自适应填充完数据的高度 winform中dataGridView高度自适应填充完数据的高度,就是dataGridView自身不产生滚动条,自己的高度 ...
- css和css3弹性盒模型实现元素宽度(高度)自适应
一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...
- 纯CSS实现Div高度根据自适应宽度(百分百调整)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- 【bzoj2002】[Hnoi2010]Bounce 弹飞绵羊 分块
[bzoj2002][Hnoi2010]Bounce 弹飞绵羊 2014年7月30日8101 Description 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀 ...
- 通过解析PE头。读取dll模块 和 dll模块函数
win32 int main(){ //001e1000 ::MessageBox(NULL, TEXT("111"), TEXT("222"), 0); HM ...
- cookie 暂时保存内容与恢复
<script type="text/javascript"> $(function(){ $('.ycb_anniu').click(function(){ $.co ...
- Hark的数据结构与算法练习之堆排序
前言 堆排序我是看了好半天别人的博客才有了理解,然后又费了九牛二虎之力才把代码写出来,我发现我的基础真的很差劲啊……不过自己选的路一定要坚持走下去.我试着把我的理解描述出来,如有不妥之处希望大家可以指 ...
- 在Linux下搭建SVN服务器
svn不仅仅可以用于程序开发,还可以做很多事情,例如备份文档. CentOS下:安装 这样同一台服务器便可以运行多个svnserver了 检查端口 注:如果修改了svn配置,需要重启svn服务 -j ...
- Ready事件与Onload事件的区别
这两种事件都是在页面文档加载时触发的,但Ready比onload先执行. 具体区别如下: 1.在Javascript中,通常使用window.onload方法. window.onload必须等到页面 ...
- Converting Stream to String and back…what are we missing?
string test = "Testing 1-2-3"; // convert string to stream byte[] byteArray = Encoding.ASC ...
- android studio ndk 调试
一: 先看看用 ndk-gdb 手动调试 这种方法只适用于手动编写 Android.mk 的情况,因为我们要手动 build debug 版本的 .so 文件.具体可以参考我的前一篇文章. 1 And ...
- Piggy-Bank[HDU1114]
Piggy-Bank Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- BZOJ4282 : 慎二的随机数列
首先在开头加上-inf,结尾加上inf,最后答案减2即可. 设s[i]为i之前未知的个数,f[i]为以i结尾的LIS,且a[i]已知,那么: f[i]=max(f[j]+min(s[i]-s[j],a ...