1.grid
web
<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Grid3</title>
<link rel="stylesheet" type="text/css"
href="ext3/resources/css/ext-all.css" />
<script type="text/javascript" src="ext3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext3/ext-all.js"></script>
</head>
<body>
<script type="text/javascript" src="grid3.js"></script>
<div id="grid3" style="width: 100%;height: 100%">
</div>
</body>
</html>
js
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
Ext.QuickTips.init();
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id',sortable:true},//设置编号排序
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'},
{header:'其他',dataIndex:'other'}
]);
//proxy直接去读取josn数据
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'gridjson.jsp'}),//提交的页面
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root',
successProperty :'success'
}, [
{name: 'id',mapping:'id',type:'int'},
{name: 'name',mapping:'name',type:'string'},
{name: 'descn',mapping:'descn',type:'string'},
{name: 'other',mapping:'other',type:'string'}
])
});
//设置分页
var grid = new Ext.grid.GridPanel({
el: 'grid3', //页面对应的层ID
ds: ds,
sm: sm,
cm: cm,
width:700,
height:280,
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
})
});
//el:指定html元素用于显示grid
grid.render();//渲染表格
ds.load({params:{start:0, limit:10}});
});
jsp(后台处理)
<%
String start = request.getParameter("start");
String limit = request.getParameter("limit");
if(start.equals("")){
start = "1";
}
try {
int index = Integer.parseInt(start);
int pageSize = Integer.parseInt(limit);
String json = "{totalProperty:100,root:[";
for (int i = index; i < pageSize + index; i++) {
json += "{id:" + i + ",name:'name" + i + "',descn:'descn" + i + "',other:'other"+i+"'}";
if (i != pageSize + index - 1) {
json += ",";
}
}
json += "]}";
response.getWriter().write(json);
} catch(Exception ex) {
}
%>
分享到：
相关推荐
"一个很漂亮的EXT例子"这个标题表明，这是一个展示EXT框架强大功能和美观设计的示例项目。EXT的例子通常包含了各种EXT组件的使用，可能包括数据绑定、异步请求、动态加载、拖放操作、自定义组件等功能。通过学习和...
这个"EXT例子，可以直接跑"的压缩包文件提供了一个完整的办公系统框架实例，非常适合初学者快速上手EXT开发。 EXT的核心是EXT JS库，它包含了大量的UI组件，如表格、面板、表单、树形视图、菜单、工具栏等，这些...
这个"struts2+ext例子"可能是一个示例项目，展示了如何将Struts2后端与ExtJS前端相结合，以实现一个完整的Web应用。在Struts2中，Action是处理请求的核心，它接收来自用户的HTTP请求，执行业务逻辑，并返回相应的...
标题中的"EXT例子网格；树等等；都有"，指的是这个压缩包中包含了EXT框架的各种示例，特别是关于网格（Grid）和树（Tree）的实例。EXT的网格组件用于展示数据，支持排序、分页、过滤等功能，常用于数据密集型的应用...
JSONEXT例子的应用主要展示了在Java开发环境中如何利用各种技术栈处理JSON数据，这些技术包括但不限于JSON库、Spring框架、Hibernate持久层框架以及ExtJS前端框架。以下是对这些关键知识点的详细解释： 1. JSON...
在"很绚丽的EXT例子"中，我们可以预见到一系列EXT组件的展示和应用，这些示例可能包含了EXT库的多种功能，如： 1. **EXT Grid**：EXT的网格组件（Grid）允许你显示大量的数据并进行排序、筛选和编辑。这个例子可能...
本例子以"Ext 例子 JSP版本"为主题，显然是展示如何在JSP（Java Server Pages）环境中集成Ext库来实现数据操作功能，如增删改查。 JSP是Java的一种动态网页技术，它允许开发者在HTML代码中嵌入Java代码，从而实现...
标题 "ext例子自写" 暗示了这是一个关于ExtJS框架的个人实践项目，其中可能包含了开发者自行编写的代码示例。ExtJS是一个流行的JavaScript库，用于构建复杂的Web应用程序，具有丰富的用户界面组件和强大的数据管理...
Ext 例子（自己做的）Ext 例子（自己做的）Ext 例子（自己做的）Ext 例子（自己做的）Ext 例子（自己做的）Ext 例子（自己做的）Ext 例子（自己做的）Ext 例子（自己做的）Ext 例子（自己做的）
很绚丽的EXT例子，可以直接跑很绚丽的EXT例子，可以直接跑
这个“java学习ssh_ext例子”显然旨在帮助开发者了解如何整合这三个框架与EXTJS 3.0，一个强大的JavaScript库，用于创建富客户端用户界面。 **Spring框架**是核心的依赖注入（DI）和面向切面编程（AOP）框架，它...
一个很好的ext例子，有需要的可以下下看看。
即：Ext.window 4.mainPage.html为tab布局，右面为tree中间为tab页面。 5.tz-normal-test.html为普通拖拽的练习。 6.tree-asynch-test.html为异步加载的树 7.tree-edit-test.html为节点可以编辑的树 8.tree-tz-test....
描述中的"ext ext例子"可能是由于输入错误，但我们可以理解为这是在强调ExtJS框架的实例。"绝对能跑起来"则意味着这个Demo是一个完整的、可运行的代码示例，旨在帮助开发者理解和学习如何使用ExtJS。 标签"ExtDemo...
EXT的例子通常涉及到EXT JS，一个用于构建桌面级Web应用的前端框架。EXT JS提供了丰富的组件库，包括数据绑定、表格面板、窗口、菜单等，使得开发者能够创建交互性强、功能完备的用户界面。 在给定的文件列表中，...
Ext例子RangeField 方便初学者学习，很简单的
SSH框架+Ext技术做前台显示的客户关系管理系统 营销管理：客户开发计划、销售机会管理 二、客户管理：客户信息管理、客户流失管理 三、服务管理：服务创建、服务分配、服务反馈、服务归档 四、统计报表：客户服务...
标题"EXT小例子包括(增,删,改,查)"暗示了这是一个关于EXT JS基础操作的示例集合，涵盖了CRUD（创建Create、读取Read、更新Update、删除Delete）这四个核心数据库操作。在Web开发中，CRUD是数据库管理和应用程序交互...
标题“EXT经典例子（增删改查）”暗示了我们将探讨EXT在实现CRUD操作中的应用。CRUD代表创建（Create）、读取（Read）、更新（Update）和删除（Delete），这是任何数据库驱动应用的基础操作。EXT提供了直观且易于...
"ext例子"部分则是实际的应用示例，这对于初学者来说尤其宝贵。这些例子展示了如何在实际项目中应用Ext JS，帮助你理解各种组件和功能的使用方式，你可以对照着例子进行实践，快速掌握编程技巧。 最后，"包1"可能...