写Ext的时候经常会遇到一些莫名其妙,令人感到非常神奇的问题,甚至都没办法用语言去描述它,搞的人想请教一下百度或Google都不知道该去怎么问,简直能够令人发疯。
先来看张截图吧。
有没有注意到里面的GridPanel很难看?因为它被它外面的那个Panel给“压迫”了,它伸展不开,呵呵。接着看看当前的JS代码。
Ext.onReady(function(){
var grid = new Ext.grid.GridPanel({
columns: [
{header: '商品编号'},
{header: '商品名称'},
{header: '商品单价'},
{header: '订购数量'},
{header: '合计'}
],
store: new Ext.data.JsonStore({}),
bbar: new Ext.PagingToolbar({})
});
var panel = new Ext.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修改成这样:
var grid = new Ext.grid.GridPanel({
columns: [
{header: '商品编号'},
{header: '商品名称'},
{header: '商品单价'},
{header: '订购数量'},
{header: '合计'}
],
viewConfig: {
forceFit: true
},
store: new Ext.data.JsonStore({}),
bbar: new Ext.PagingToolbar({})
});
它所在的Panel修改成这样:
{
title: '商品明细',
layout: 'fit',
items: grid
}
清空缓存,刷新一下,晕了,还是没变。%>_<%
为什么还是不行呢?其实GridPanel已经占满它的父容器了,问题是它的父容器并没有占满其自身的父容器(就是TabPanel)。接着修改,设置panel的layout为border,令其顶部panel的region为north,而tabpanel的region则为center,这样就都填充满了。
完整代码如下:
Ext.onReady(function(){
var grid = new Ext.grid.GridPanel({
columns: [
{header: '商品编号'},
{header: '商品名称'},
{header: '商品单价'},
{header: '订购数量'},
{header: '合计'}
],
viewConfig: {
forceFit: true
},
store: new Ext.data.JsonStore({}),
bbar: new Ext.PagingToolbar({})
});
var panel = new Ext.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: '发票信息'
}]
}]
})
})
来源:http://www.ineeke.com/archives/ext-tabpanel-items-highly-adaptive-width/