简略的GridPanel实例 _Web前端

简单的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>
1 楼 njsteven2010 2010-10-14