Ext4 Ext.grid.Panel列自适应宽度
功能描述：根据传入的store数据源中每列内容的最大长度，自动调整Ext.grid.Panel列宽度，使每列的内容显示完全，不被隐藏起来。
实现方法：用一个absolute定位的容器来计算store数据源中每列的长度，取最大值作为此列的width配置。
Ext版本号为：4.1.1a
未设置Ext.grid.Panel列的宽度效果如下，默认宽度为１００px
通过计算每列的最大长度，设置Ext.grid.Panel列宽为最大长度的效果如下
源代码和一些计算容器的样式设置如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext.grid.Panel列自适应宽度</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/example.css" />
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['ID', 'UserName', 'Address']
});
var store = Ext.create('Ext.data.Store',
{
model: 'User',
autoLoad: true,
listeners: { load: function () {
var dv = Ext.get('dvCompute').dom, //计算用的容器
colWidth = { ID: 0, UserName: 0, Address: 100 }; //用于存储每列数据中最大的长度，默认为100，columns没配置width默认页也是100
function getContentWidth(v) {
dv.innerHTML = v;
return dv.offsetWidth+12;//注意加上单元格的左右间距6*2
}
//===============对数据源中所有列进行计算获取最大长度
store.each(function (r) {
colWidth.ID = Math.max(colWidth.ID, getContentWidth(r.get('ID')));
colWidth.UserName = Math.max(colWidth.UserName, getContentWidth(r.get('UserName')));
colWidth.Address = Math.max(colWidth.Address, getContentWidth(r.get('Address')));
});
//===============计算结束
var grid = Ext.create('Ext.grid.Panel'
, {
store: store,
title: 'Ext.grid.Panel列自适应宽度',
columns: [
{ text: 'ID', dataIndex: 'ID', width: colWidth.ID },
{ text: '用户名', dataIndex: 'UserName', width: colWidth.UserName },
{ text: '地址', dataIndex: 'Address', width: colWidth.Address}]
});
grid.render(document.body);
}
},
proxy: {
type: 'ajax',
url: 'data.txt',
reader: { type: 'json' }
}
});
});
</script>
</head>
<body>
<div style="font:normal 11px/15px tahoma,arial,verdana,sans-serif;position:absolute;" id="dvCompute">
这个div很重要，用于计算每列的长度，作用于这个控件的样式要和ext样式表中定义的控制字体大小的一致，要不计算不精确，并且定位为position:absolute<br />
本示例使用ｅｘｔ４.1.1a，控制字体的样式名称为：.x-grid-row .x-grid-cell，对应的css为：font:normal 11px/15px tahoma,arial,verdana,sans-serif;，其他版本自己找对应的样式
<br />实际中可以left和top设置为很大的负数（如-9999px）使控件不在当前视图中显示</div>
</body>
</html>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：Ext4 Ext.grid.Panel列自适应宽度