ExtJs 之GridPanel实例2
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> <script type="text/javascript" src="../ext-3.4.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../ext-3.4.0/ext-all.js"></script> <link href="../ext-3.4.0/resources/css/ext-all.css" rel="stylesheet" type="text/css"> </head> <body> <div id="grid-div"></div> <div id="binding-example" ></div> <script> function checkSex(val) { if(val=='0') { return '<span style=\"color:blue\">男</span>'; } else { return '<span style=\"color:green\">女</span>'; } } Ext.onReady(function(){ var cm = new Ext.grid.ColumnModel([ //设置好表的列头 {header:'编号',dataIndex:'id',sortable:true}, //{首部显示文本,列对应的记录集字段,列是否排序(sortable)} {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'}, {header:'性别',dataIndex:'sex',sortable:true,renderer:checkSex},//renderer就是在读取该字段前执行的函数 { header:'出生日期',dataIndex:'birthdate',renderer:Ext.util.Format.dateRenderer('m/d/Y')}, { xtype: 'actioncolumn', width: 50, items: [{ icon : '../ext-3.4.0/examples/shared/icons/fam/delete.gif', // Use a URL in the icon config tooltip: 'Sell stock', handler: function(grid, rowIndex, colIndex) { var rec = ds.getAt(rowIndex); alert("Sell " + rec.get('name')); } }] } ]) ; var data = [ ['1','张三','descn1','0','9/12 12:00am'], ['2','李四','descn2','1','9/12 12:00am'], ['3','王五','descn3','0','9/12 12:00am'], ['4','赵六','descn4','1','9/12 12:00am'], ['5','孙奇','descn5','0','9/12 12:00am'] ] ; var ds = new Ext.data.Store({ proxy:new Ext.data.MemoryProxy(data),//获取数据的方式 (用Ext.data.MemoryProxy专门解析JavaScript变量) reader:new Ext.data.ArrayReader({},[ //如何解析这堆数据 {name: 'id' }, {name: 'name' }, {name: 'descn' }, {name:'sex' }, {name:'birthdate',type:'date',dateFormat: 'n/j h:ia'} ]) }) ;//远程读取数据使用ScriptTagProxy 如要从本地读取数据 需要将MemoryProxy改成PagingMemoryProxy ds.load() ;//加载数据 var grid = new Ext.grid.GridPanel({ el:'grid-div', ds: ds, //ds可以把任何格式的数据转化成grid可以使用的形式 cm: cm, sm: new Ext.grid.RowSelectionModel({singleSelect: true}), width:505, height:233 }) ; grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) { var detailPanel = Ext.getCmp('detailPanel'); bookTpl.overwrite(detailPanel.body, r.data); }); grid.render() ; //注意这些文件是有顺序的,最好放在render()下面,否则就运行不出来上面的内容 var ct = new Ext.Panel({ renderTo: 'binding-example', frame: true, title: 'Book List', width: 540, height: 400, layout: 'border', items: [ grid, { id: 'detailPanel', region: 'center', bodyStyle: { background: '#ffffff', padding: '7px' }, html: 'Please select a book to see additional details.' } ] }) // define a template to use for the detail view var bookTplMarkup = [ 'id: <a href="" target="_blank">{id}</a><br/>', 'name: {name}<br/>', 'descn: {descn}<br/>', 'birthdate: {birthdate}<br/>' ]; var bookTpl = new Ext.Template(bookTplMarkup);//创建一个模版 }) ; </script> </body> </html>