写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高度宽度自适应的更多相关文章

  1. ECharts 高度宽度自适应(转载)

    最近在写一个地图类的应用,用的是echarts的图表,然而一上来就一脸懵逼,如果父级容器的height/width属性设置为百分比的形式,那么echarts就会warning,且不能正常的生成图表.所 ...

  2. CSS学习笔记(6)--浮动,三列布局,高度宽度自适应

    百度ife任务三,要求中间宽度自适应,高度取三列最高者. 开始用position的relative和absolute,但是relative不能自适应宽,absolute不能加float浮动,撑不起来外 ...

  3. iframe高度宽度自适应(转)

    http://www.cnblogs.com/snandy/p/3900016.html 跨子域的iframe高度自适应 完全跨域的iframe高度自适应 同域的我们可以轻松的做到 1. 父页面通过i ...

  4. iframe高度/宽度自适应(使用body而不是docuemntElement对象)

    iframe在ie11中会显示过于短.为了自适应,增加如下代码: <iframe *** onload='changeFrameHeight()' > <script> fun ...

  5. iframe高度宽度自适应

    iframe { width: 100%; height: 100%; border: none; position: inherit; } 网上全是js方法,而且略显臃肿,故找到了一个css方法,宽 ...

  6. iframe 高度宽度自适应

    <iframe id="iframeHome" name="iframeHome" src="/Page/NewHome/GongZuoTai. ...

  7. 【接上一篇】winform中dataGridView高度和宽度自适应填充完数据的高度和宽度,即dataGridView根据数据自适应大小

    上一篇:winform中dataGridView高度自适应填充完数据的高度 winform中dataGridView高度自适应填充完数据的高度,就是dataGridView自身不产生滚动条,自己的高度 ...

  8. css和css3弹性盒模型实现元素宽度(高度)自适应

    一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  9. 纯CSS实现Div高度根据自适应宽度(百分百调整)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 【bzoj2002】[Hnoi2010]Bounce 弹飞绵羊 分块

    [bzoj2002][Hnoi2010]Bounce 弹飞绵羊 2014年7月30日8101 Description 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀 ...

  2. 通过解析PE头。读取dll模块 和 dll模块函数

    win32 int main(){ //001e1000 ::MessageBox(NULL, TEXT("111"), TEXT("222"), 0); HM ...

  3. cookie 暂时保存内容与恢复

    <script type="text/javascript"> $(function(){ $('.ycb_anniu').click(function(){ $.co ...

  4. Hark的数据结构与算法练习之堆排序

    前言 堆排序我是看了好半天别人的博客才有了理解,然后又费了九牛二虎之力才把代码写出来,我发现我的基础真的很差劲啊……不过自己选的路一定要坚持走下去.我试着把我的理解描述出来,如有不妥之处希望大家可以指 ...

  5. 在Linux下搭建SVN服务器

    svn不仅仅可以用于程序开发,还可以做很多事情,例如备份文档. CentOS下:安装 这样同一台服务器便可以运行多个svnserver了 检查端口 注:如果修改了svn配置,需要重启svn服务 -j ...

  6. Ready事件与Onload事件的区别

    这两种事件都是在页面文档加载时触发的,但Ready比onload先执行. 具体区别如下: 1.在Javascript中,通常使用window.onload方法. window.onload必须等到页面 ...

  7. Converting Stream to String and back…what are we missing?

    string test = "Testing 1-2-3"; // convert string to stream byte[] byteArray = Encoding.ASC ...

  8. android studio ndk 调试

    一: 先看看用 ndk-gdb 手动调试 这种方法只适用于手动编写 Android.mk 的情况,因为我们要手动 build debug 版本的 .so 文件.具体可以参考我的前一篇文章. 1 And ...

  9. Piggy-Bank[HDU1114]

    Piggy-Bank Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  10. BZOJ4282 : 慎二的随机数列

    首先在开头加上-inf,结尾加上inf,最后答案减2即可. 设s[i]为i之前未知的个数,f[i]为以i结尾的LIS,且a[i]已知,那么: f[i]=max(f[j]+min(s[i]-s[j],a ...