简单的GridPanel实例
<%@ 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>?
这个小例子写的不错，值得一看。初学者必备