最近研究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`示例代码的详细解析： 1. **Grid的基本结构** - `Ext.grid.Panel`：这是Grid组件的基础类，它包含了一个可配置的列模型（column model）、数据源（store）以及视图配置。 - `store`：存储...
在给定的"Extjs4 grid使用例子"中，我们可以深入理解如何在MVC架构下有效地利用ExtJS4的Grid组件。Grid组件是ExtJS中的核心部分，它提供了一个灵活的、可定制的数据展示网格，通常用于显示和操作大量数据。 1. **...
EXTJS4 GRID 表格 分页 编辑 添加判断 颜色判断 分组 等示例
在myapp4项目中，你可能会找到相关的代码示例，展示了如何在实际应用中配置和使用ExtJS Grid的过滤功能。通过阅读和理解这些代码，你可以更好地理解和应用上述理论知识。 总结来说，ExtJS Grid的过滤操作提供了...
Extjs动态Grid的生成 htm
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹，其余文件过大并且与主题无关,因此未包含。具体方法，请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
这篇博客文章 "ExtJS 使用grid显示数据" 可能详细阐述了如何利用ExtJS的Grid面板来展示和操作数据。 在ExtJS中，Grid Panel是一种数据驱动的组件，它允许开发者以表格的形式展示大量数据，并且支持分页、排序、过滤...
ExtJS是一种广泛应用于Web开发的...总的来说，"ExtJS静态使用示例"提供了一个学习和实践ExtJS基础功能的机会，通过Grid、Panel和Tree的使用，可以帮助开发者掌握如何在Web应用中构建交互性和功能性丰富的用户界面。
EXTJS是一个强大的JavaScript框架，主要用于构建富客户端应用。在EXTJS中，Grid控件是用于展示大量结构化数据的关键组件，具有丰富的功能和...对于EXTJS开发者而言，掌握这一功能有助于提升应用的实用性和用户体验。
在ExtJs框架中，Grid组件是一种非常常用的展示数据表格的方式，它提供了丰富的功能，包括数据的排序、分页、过滤以及行选择等。在实际应用中，经常需要根据用户交互来判断Grid中的行是否被选中，以便进行下一步的...
在提供的压缩包文件"extjs4.1_TreeGrid"中，可能包含了一些EXTJS 4树形表格组件的示例代码和资源，通过学习和分析这些示例，你可以更好地理解如何在项目中应用这个组件。 总结来说，EXTJS 4的树形表格组件是一个...
Grid列表通常用于展示大量结构化的数据，而导出功能可以帮助用户将这些数据保存到本地，方便进一步分析或共享。本文将深入探讨如何利用ExtJs的相关控件类来实现一个自定义的Grid列表导出功能，同时保持列表的样式。 ...
4. **源码使用**：提到“源码可以直接导入MYECLIPSE使用”，这意味着提供的是一个实际的代码示例，你可以直接在MyEclipse（一个流行的Java集成开发环境）中打开并运行，以便学习和理解如何实现EXTJS Grid到Excel的...
在IT领域，ExtJS是一个广泛使用的JavaScript库，用于构建富客户端Web应用程序，特别是那些需要复杂用户界面的应用。本文将深入探讨如何在ExtJS中动态生成Grid，这是一个非常实用的功能，可以适应不断变化的数据需求...
描述中提到的“增加框也能根据表的不同而不同”，这可能指的是EXTJS中的Container组件可以根据Grid的变化动态调整其内容。例如，可以使用Container来承载Grid，当Grid的列数或列类型改变时，Container可以相应地调整...
在EXT4.2.1这个压缩包中，可能包含了EXTJS 4.2.1的完整库文件、示例代码、文档和其他资源，可以帮助开发者快速上手EXTJS Grid的开发。通过学习和实践这些资源，开发者能够熟练掌握EXTJS Grid的使用，构建出功能强大...
其中，Grid Panel（简称 Grid）是ExtJs中最常用的一个组件之一，用于展示表格数据。在实际业务场景中，经常需要支持用户对表格中的多行数据进行选择，并执行批量操作，如删除、编辑等。因此，掌握如何在ExtJs Grid中...
打印Grid插件是为了满足这种需求而设计的，它允许开发者扩展ExtJS4 Grid Panel的功能，使其具备打印能力。这个插件通常包含一系列方法和配置选项，用于自定义打印样式、布局以及要打印的数据范围。 在"extjs4-ux-...
这个示例中，ExtJS用于前端UI的构建，JSON作为数据交换格式，而Struts2则作为后端MVC框架处理请求和返回数据。 1. **ExtJS Tree**: ExtJS 是一个强大的JavaScript库，专门用于创建富客户端应用程序。其中的Tree组件...
在EXTJS开发中，我们经常会遇到使用Grid组件展示数据的情况，特别是当数据包含中文字符时，可能会遇到排序问题。EXTJS Grid默认的排序机制对于英文字符处理得较好，但对于中文字符，由于编码和比较规则的不同，可能...