施用ExtJS之Grid有感而发，贡献示例给大家
日期：2014-05-16 浏览次数：20501 次
使用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:"
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
