<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <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/ext-all-debug.js"></script> <script type="text/javascript"> Ext.onReady(function(){ var column=new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} //{id:'descn',header:'描述',dataIndex:'descn'} //header(首部显示文本),dataIndex(列对应的记录集字段),sortable(是否排序),renderer(列的渲染函数),width(宽度),format(格式化信息) ]); var data=[ ['1','name1','descn1'], ['2','name2','descn2'], ['3','name3','descn3'] ]; var store=new Ext.data.Store({ proxy:new Ext.data.MemoryProxy(data),//获得本地数据 //proxy:new Ext.data.ScriptTagProxy({url:'http://www.baidu.com'}),//获得远程数据 reader:new Ext.data.ArrayReader( //解析数据 {}, [ {name:'id'}, {name:'name'}, {name:'descn'} //{name:'id',mapping:1}, //{name:'name',mapping:0},//第一列显示name //{name:'descn',mapping:2} ] ) }); var grid=new Ext.grid.GridPanel({ renderTo:'grid', title:'grid', height:300, width:500, enableColumnMove:false,//禁止拖放列 enableColumnResize:false,//精致改变列的宽度 stripeRows:true,//表格显示斑马线效果 viewConfig:{//设置表格列宽度 //forceFit:true //平均分配 autoSizeColumn:true //根据内容填充列的大小 }, //autoExpandColumn:'descn', //autoExpandColumn只能指定一列id,此id在cm里设置 loadMask:true, store:store, cm:column }); store.load(); }); </script> </head> <body> <div id="grid"></div> </body> </html>