GridPanel简略实例
GridPanel简单实例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link href="ext/resources/css/ext-all.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext/ext-all.js"></script> <script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function() { var data = [ [ 1, 'EasyJWeb', 'EasyJF', 'www.easyjf.com' ], [ 2, 'jfox', 'huihoo', 'www.huihoo.org' ], [ 3, 'jdon', 'jdon', 'www.jdon.com' ], [ 4, 'springside', 'springside', 'www.springside.org.cn' ] ]; var store = new Ext.data.SimpleStore({ data : data, fields : [ "id", "name", "organization", "homepage" ] }); var grid = new Ext.grid.GridPanel({ renderTo : "hello", title : "中国Java开源产品及团队", height : 150, width : 600, columns : [ {//表格列模式的配置数组,可自动创建ColumnModel列模式 header : "项目名称",//表头 dataIndex : "name"//store中的record或fields中的字段,没有或是没有对应,就不会显示数据 }, { header : "开发团队", dataIndex : "organization" }, { header : "网址", dataIndex : "homepage" } ], store : store,//表格的数据集 autoExpandColumn : 2 //自动填满表格未用空间的列,参数为列id,该id不能为0 }); }); </script> </head> <body> <div id="hello"></div> </body> </html>