Ext4 Ext.grid.Panel列自适应宽度

  功能描述:根据传入的store数据源中每列内容的最大长度,自动调整Ext.grid.Panel列宽度,使每列的内容显示完全,不被隐藏起来。

 

  实现方法:用一个absolute定位的容器来计算store数据源中每列的长度,取最大值作为此列的width配置。

 

  Ext版本号为:4.1.1a

 

  未设置Ext.grid.Panel列的宽度效果如下,默认宽度为100px

Ext4 Ext.grid.Panel列自适应宽度

  通过计算每列的最大长度,设置Ext.grid.Panel列宽为最大长度的效果如下

Ext4 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 />
本示例使用ext4.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列自适应宽度

评论(0)Web开发网
阅读(827)喜欢(0)不喜欢(1)extjs开发技巧