Ext4 Ext.grid.Panel列自适应宽度
功能描述:根据传入的store数据源中每列内容的最大长度,自动调整Ext.grid.Panel列宽度,使每列的内容显示完全,不被隐藏起来。
实现方法:用一个absolute定位的容器来计算store数据源中每列的长度,取最大值作为此列的width配置。
Ext版本号为:4.1.1a
未设置Ext.grid.Panel列的宽度效果如下,默认宽度为100px
通过计算每列的最大长度,设置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列自适应宽度