<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>ext 学习</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="ext/ext-all.css" mce_href="ext/ext-all.css" /> <link rel="stylesheet" type="text/css" href="ext/grid-examples.css" mce_href="ext/grid-examples.css" /> <link rel="stylesheet" type="text/css" href="ext/examples.css" mce_href="ext/examples.css" /> <mce:script type="text/javascript" src="ext/ext-base.js" mce_src="ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="ext/ext-all.js" mce_src="ext/ext-all.js"></mce:script> <mce:script type="text/javascript" src="ext/array-grid.js" mce_src="ext/array-grid.js"></mce:script> <mce:script type="text/javascript"><!-- Ext.onReady(function(){ function change(val) { if (val > 0) { return '<span style="color:green;" mce_style="color:green;">' + val + '</span>'; } else if (val < 0) { return '<span style="color:red;" mce_style="color:red;">' + val + '</span>'; } return val; } function pctChange(val) { if (val > 0) { return '<span style="color:green;" mce_style="color:green;">' + val + '%</span>'; } else if (val < 0) { return '<span style="color:red;" mce_style="color:red;">' + val + '%</span>'; } return val; } var data = [[1,'name1','company1','web.com1','9/1 12:00am',200], [2,'name2','company2','web.com2','9/1 12:00am',600], [3,'name3','company3','web.com3','9/1 12:00am',500]]; var store = new Ext.data.SimpleStore({data:data,fields:[{name:'id'},{name:'name'},{name:'company'},{name:'web'},{name:'join', type: 'date', dateFormat: 'n/j h:ia'},{name:'money',type:'float'}]}); var grid = new Ext.grid.GridPanel({ renderTo:"divId", title:"simpleStore", height:200, wigth:300, columns:[ {header:"编号",sortable : true,dataIndex:"id" }, {header:"公司名称",sortable : true,dataIndex:"name"}, {header:"公司地址",sortable : true,dataIndex:"company"}, {header:"网址",sortable : true,dataIndex:"web"}, {header:"成立时间",sortable : true,dataIndex:"join",renderer:Ext.util.Format.dateRenderer('m/d/Y')}, {header:"注册资金",sortable:true,dataIndex:"money"}, { xtype: 'actioncolumn', 50, items: [{ icon : 'ext/delete.gif', // Use a URL in the icon config tooltip: 'Sell stock', handler: function(grid, rowIndex, colIndex) { var rec = store.getAt(rowIndex); alert("Sell " + rec.get('company')); } }, { getClass: function(v, meta, rec) { // Or return a class from a function if (rec.get('change') < 0) { this.items[1].tooltip = 'Do not buy!'; return 'alert-col'; } else { this.items[1].tooltip = 'Buy stock'; return 'buy-col'; } }, handler: function(grid, rowIndex, colIndex) { var rec = store.getAt(rowIndex); alert("Buy " + rec.get('company')); } }] } ], store:store, autoExpandColumn:2 }); }); // --></mce:script> </head> <body> <div id="divId"></div> </body> </html>
