<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>ExtJS</title><link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /><script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script><script type="text/javascript" src="extjs/ext-all.js"></script><script type="text/javascript" src="Extjs/source/locale/ext-lang-zh_CN.js"></script><style type="text/css"> html,body{ margin:0px; height:100%; } #content{ height:100%; width:100%; } </style> <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> </head><body><div id="content"> </div> </body></html>
