Ext Grid表格的自动宽度及高度的实现

22 篇文章 0 订阅
希望Ext的表格能自适应外层的div大小,但Ext的Grid构造函数的width、height项不支持100%的设置方式,所以改用以下方式初始化Grid:

[color=red]width: Ext.get("content").getWidth(),
height: Ext.get("content").getHeight(),[/color]

<div id="content">
<div id="grid-example"></div>
<div>

#content {
width: 100%;
height: 100%;
}

完整js代码:

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'id',header: "序号", width: 50, sortable: true, renderer: keyChange, dataIndex: 'id'},
{header: "数据表表名", width: 100, sortable: true, renderer: hrefChange, dataIndex: 'tableAlias'},
{header: "物理表名", width: 100, sortable: true, dataIndex: 'tableName'},
{header: "类型", width: 75, sortable: true, dataIndex: 'type'}
],
stripeRows: true,
width: Ext.get("content").getWidth(),
height: Ext.get("content").getHeight(),
addClass:"grid",
tbar: [{
text: '新增模版',
handler : function(){
window.location.href = 'templateDefineList4.html';
}
},{
text: '删除模版',
handler : function(){

}
}],
bbar: new Ext.PagingToolbar({
pageSize: 15,
store: store,
displayInfo: true,
displayMsg: '当前显示记录 {0} - {1} 总条数 {2}',
emptyMsg: '无记录'
})
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值