使用ExtJS之Grid有感而发，贡献示例给大家
?
最近研究ExtJs觉得官方示例代码有些过多，尤其是Grid的使用代码有的几乎没有太大作用。本人在仔细研究后写出了如下一个精简的Grid示例，希望能给大家带来点帮助 附带图片效果在附件中 首先，上官方下载资源包大家应该都很熟悉了
HTML页面代码通常是这样的
<html> <head> <title>My JSP 'index.jsp' ExtjsServlet page</title> <script type="text/javascript" src="js/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="js/ext-all.js"></script> <link rel="stylesheet" type="text/css" href="js/resources/css/ext-all.css" /> <script type="text/javascript" src="js/js.js" ></script> </head> <body> <input type="button" id="remove" value="remove" /> <div id="grid"></div> </body></html>
?
第二步当然是核心了，我的JS文件中的代码
Ext.onReady(function(){ var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), //设置网格大标题 {header:'编号',dataIndex:'id',sortable:true, editor:new Ext.grid.GridEditor(new Ext.form.TextField( { allowBlank:false }))}, {header:'价钱',dataIndex:'price',sortable:true, editor:new Ext.grid.GridEditor(new Ext.form.TextField( { allowBlank:false }))}, {header:'性别',dataIndex:'sex',sortable:true,width:200,renderer:renderSex} ]); function renderSex(value) { if(value=='女') { return "<span style='color:red'>"+value+"</span>"; } else { return "<img src='js/drop-yes.gif'/> <span style='color:greed'>"+value+"</span>"; } } var store= new Ext.data.Store({ proxy:new Ext.data.HttpProxy({url:'ExtJs.do'}),//请求URL reader:new Ext.data.JsonReader({//从JSON中读取的数据 totalProperty:'totalProperty',//获取总共的记录数 root:'root'//这个必须设定值否则网格里面没有内容.值不一定是ROOT，其他的也行 },[ {name:'id'}, {name:'price'}, {name:'sex'} ]) }); //网格视图设置 var grid = new Ext.grid.EditorGridPanel({ title:'ORDER表查询记录显示结果', renderTo:'grid',//这个参数必须设定否则显示空白页面 store:store, cm:cm, loadMask:true,//这个对刷新按钮起作用 width:400, height:200, //试图下方分页工具条显示的内容 bbar : new Ext.PagingToolbar({ store : store, pageSize : 4,//每页显示的数目应该与limit的值保持一致 displayInfo : true,//设置是否显示信息 beforePageText:"第", afterPageText:"/ {0}页", displayMsg : "当前记录从 {0} - {1} 总 {2} 条记录", emptyMsg : "没有相关记录!", }) }); //点击删除按钮可以移除当前视图中的一项,但是刷新后仍然是原来的样子，并没有删除数据库中的数据 Ext.get('remove').on("click",function(){ store.remove(store.getAt(1)); grid.view.refresh(); },this); //初始化参数，start表示从第几条开始查询，limit表示查询多少条记录,start与limit是提交请求时的请求参数，不可修改必须写成这样 store.load({params:{start:0,limit:4}})；});??
以上的JS代码我采用的是配合JSON来替换值的方法做的，所以在处理业务逻辑时，比如在ACTION中的代码也显得很重要
BaseForm bf=(BaseForm)form; Order1Dao dao=new Order1DaoImpl(); System.out.println(bf.getStart()+"================================"+bf.getLimit()); List<Order1> orders=dao.listall(bf.getStart(),bf.getLimit()); int total=dao.getTotal(); StringBuilder s= new StringBuilder(" {totalProperty:"+total+",pageNo:"+bf.getStart()+",pageSize:"+bf.getLimit()+",root:["); int i=0; for(Order1 order:orders){ i++; s.append("{id:'"+order.getId()+"',price:'"+order.getPrice()+"',sex:'"+order.getSex()+"'}"); if(i<5) { s.append(","); } } s.append("]}"); response.setContentType("text/html;charset=utf-8"); response.getWriter().write(s.toString());?
???怎么样？运行起来看看吧，是不是简单许多呢？