EXT 3.x 使用详解之Ext.grid.GridPanel(二)
本篇主要讲解了grid如何自动调整大小，以便在我们窗口发生变化的时候grid能够自动调整。主要看代码吧，注释很清楚了!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><%@ page pageEncoding="UTF-8"%><html><head><style type="text/css">html,body{margin:0px;height:100%;}#content{height:100%;width:100%;}</style></head><body style="height:100%"><script type="text/javascript">var grid;var cm;var ds;//性别详细function renderSex(value) {if (value == 'male') {return "<span style='color:red;font-weight:bold;'>男</span>";} else {return "<span style='color:green;font-weight:bold;'>女</span>";}}//描述详细function renderDescn(value, cellmeta, record, rowIndex, columnIndex,store){var str = (rowIndex+1)+"行|"+(columnIndex+1)+"列";return str;}//页面完成后加载Ext.onReady(function(){//对列的定义cm = new Ext.grid.ColumnModel([{header:'<font color="blue">编号</font>',width: Ext.get("content").getWidth()/4,sortable:true,dataIndex:'id'},//sortable 可排序，具体体现在有排序选项卡{header:'<font color="blue">性别</font>',width: Ext.get("content").getWidth()/4,dataIndex:'sex',renderer:renderSex},{header:'<font color="blue">名称</font>',width: Ext.get("content").getWidth()/4,dataIndex:'name'},{header:'<font color="blue">描述</font>',width: Ext.get("content").getWidth()/4,dataIndex:'descn',renderer:renderDescn}]);//二维数组的数据，Json数据结构var data = [['1','male','name1','descn1'],['2','female','name2','descn2'],['3','male','name3','descn3'],['4','female','name4','descn4'],['5','male','name5','descn5']];//解释二维数组//proxy告诉我们从哪里获得数据，reader告诉我们如何解析这个数据 ds = new Ext.data.Store({proxy: new Ext.data.MemoryProxy(data),//Ext.data.ArrayReader专门用来解析数组，绑定与cm的dataIndex相对应reader: new Ext.data.ArrayReader({}, [{name: 'id'},{name: 'sex'},{name: 'name'},{name: 'descn'}])});//加载dataStoreds.load();//创建grid对象grid = new Ext.grid.GridPanel({renderTo: 'content',//渲染到具体div//获得div的宽和高，以便计算并自动伸缩比例，用来控制grid的各个列宽和整个grid的高度width: Ext.get("content").getWidth(),height: Ext.get("content").getHeight(), //绑定ds和cmstore: ds,cm: cm});});//自动适应浏览器窗口调整window.onresize=function(){grid.destroy();cm = new Ext.grid.ColumnModel([//对列进行比例分配，以便在窗口放大和缩小时候进行相对比例计算，以便自动调整grid的列宽和高度{header:'<font color="blue">编号</font>',width: Ext.get("content").getWidth()/4,sortable:true,dataIndex:'id'},{header:'<font color="blue">性别</font>',width: Ext.get("content").getWidth()/4,dataIndex:'sex',renderer:renderSex},{header:'<font color="blue">名称</font>',width: Ext.get("content").getWidth()/4,dataIndex:'name'},{header:'<font color="blue">描述</font>',width: Ext.get("content").getWidth()/4,dataIndex:'descn',renderer:renderDescn}]); grid = new Ext.grid.GridPanel({width: Ext.get("content").getWidth(),height: Ext.get("content").getHeight(), store: ds,cm: cm});grid.render(Ext.get("content"));}; </script> <div id="content"><div></body></html>