最近研究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());
怎么样?运行起来看看吧,是不是简单许多呢?
分享到:
相关推荐
extjs grid示例代码extjs grid示例代码extjs grid示例代码extjs grid示例代码
EXTJS4 GRID 表格 分页 编辑 添加判断 颜色判断 分组 等示例
基于Extjs4官方的例子,做了一个关于MVC和Grid增删改的小例子
Extjs动态Grid的生成 htm
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
ExtJS示例,Grid的使用,Panle的使用,树的使用
extjs树型表格组件的使用示例,详细说明可以参见http://blog.csdn.net/snail_spoor/article/details/39698037
使用ExtJs相关的控件类自己实现的一个ExtJs的Grid列表的导出功能,可以导出列表的相关样式等
ExtJs 4.0 Grid 单元格合并控件封装
Extjs Tree + JSON + Struts2 示例源代码
extjs4 grid 包括form js代码
EXTJS 上传组件及示例EXTJS 上传组件及示例EXTJS 上传组件及示例
Extjs4 grid 导出为Excel 下载后放在网站(不放在网站中导出按钮不能会点击无响应,因为这里调用了swf文件)里可直接运行index.html测试 <link href='...
EXTJS grid导出EXCEL文件,源码可以直接导入MYECLIPSE使用,EXTJS版本3.2.0
ExtJs Grid是否选择行,是:返回选择行record;否:返回false
extjs editgrid示例代码extjs editgrid示例代码extjs editgrid示例代码extjs editgrid示例代码
Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...
extjs grid ide:myeclipse5.5 jboss4.2.1 extjs4.2.1
extjs grid 多表头 插件 extjs grid 多表头 插件