本篇主要讲解了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'} ]) }); //加载dataStore ds.load(); //创建grid对象 grid = new Ext.grid.GridPanel({ renderTo: 'content',//渲染到具体div //获得div的宽和高,以便计算并自动伸缩比例,用来控制grid的各个列宽和整个grid的高度 width: Ext.get("content").getWidth(), height: Ext.get("content").getHeight(), //绑定ds和cm store: 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>