学习ext也有一段时间了,明白只有不断的总结,才能让自己进步的更快,遂写此文,权当积累经验~呵呵
<script type="text/javascript">
Ext.onReady(function(){
var cm = new Ext.grid.ColumnModel([{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}]);
var ds = new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:'data.jsp'}),
reader:new Ext.data.JsonReader({totalProperty:'totalProperty',root:'root'},[{name:'id'},
{name:'name'},
{name:'descn'}
]),
});
ds.load({params:{start:0,limit:10}});
var grid = new Ext.grid.GridPanel({
el:'grid',//在body里要有个<div id="grid" style="height:270px;"></div>的东西,主要就是为了让系统知道表格显示的位置,后面的style属性主要是分页显示数据的时候所占的高度
ds:ds,
cm:cm,
//分页工具条
bbar:new Ext.PagingToolbar({
pageSize:10,
store:ds,
displayInfo:true,
displayMsg:'显示第{0}条到第{1}条记录,一共{2}条',
emptyMsg:'没有记录'
})
});
grid.render();//渲染
});
</script>
上面是前台的代码,下面把后台代码贴上:(data.jsp)
<%
int index = new Integer(request.getParameter("start") == null ? "0": request.getParameter("start"));
System.out.println("index="+index);
int pageSize = Integer.parseInt(request.getParameter("limit")==null?"10":request.getParameter("limit"));
System.out.println("pageSize="+pageSize);
String json = "{totalProperty:100,root:[";
for(int i=index;i<pageSize+index;i++)
{
json+="{id:"+i+",name:"+"'"+i+"'"+",descn:"+"'"+i+"'"+"}";
if(i != pageSize+index-1){
json+=",";
}
}
json+="]}";
response.getWriter().write(json);
System.out.println(json);
%>
注:data.jsp页面不需要html标签,因为只需要返回形如:
{totalProperty:100,root:[{id:0,name:'name',descn:'descn'},{id:1,name:'name1',descn:'descn1'},{id:2,name:'name2',descn:'descn2'}}
这样的数据格式返回即可。在前台的jsonreader即可识别!呵呵,一个简单的ext分页就完成了!页面截图:
- 大小: 30.3 KB
分享到:
相关推荐
简单的小例子Ext+servlet 分页 类表 分页 服务器端用的是 servlet
是初学者的例子,很简单 ,很实用
2.2. 让我们搞一个grid出来耍耍吧。 2.3. 上边那个是1.x的,2.0稍微有些不同哦 2.4. 按顺序,咱们先要把常见功能讲到 2.4.1. 自主决定每列的宽度 2.4.2. 让grid支持按列排序 2.5. 让单元格里显示红色的字,图片,...
初学者的实例,最基本的Ext页面与后台交互,sqlserver 的数据库,如果要换数据库,得改动分页查询语句,另外最好多看看ext的api中有关分页支持的文档
2.2. 让我们搞一个grid出来耍耍吧。 2.3. grid默认自带的功能 2.4. 按顺序,咱们先要把常见功能讲到 2.4.1. 自主决定每列的宽度 2.4.2. 让grid支持按列排序 2.4.3. 中文排序是个大问题 2.5. 让单元格里显示红色的字...
2.2. 让我们搞一个grid出来耍耍吧。 2.3. 上边那个是1.x的,2.0稍微有些不同哦 2.4. 按顺序,咱们先要把常见功能讲到 2.4.1. 自主决定每列的宽度 2.4.2. 让grid支持按列排序 2.5. 让单元格里显示红色的字,图片...
本文将简单地介绍Ext的几个基本概念,和如何快速地做出一个动态的页面并运行起来,假设读者已具备了一些JavaScript经验和初级了解HTML Dom。 目 录 EXT 中文手册 1 EXT简介 3 目錄 3 下载Ext 4 开始! 4 Element:...
点击省略号, 省略号隐藏, 显示一个与省略号相同宽度的页面跳转转入框. 整个设置还比较智能. 在 ExtJS3.3基础上开发的. 低一点的版本应该也能用. 没有去测试. 参考: Ext.PagingToolbar.js 因为我开发测试完这个...
点击省略号, 省略号隐藏, 显示一个与省略号相同宽度的页面跳转转入框. 整个设置还比较智能. 在 ExtJS3.3基础上开发的. 低一点的版本应该也能用. 没有去测试. 参考: Ext.PagingToolbar.js 如有BUG还请各位提出或...
Struts2+Spring+Ibatis+Ext,ext光是实现了登陆! 业务主要是简单的实现了两张表的增删改查!还有对查询的结果了Ibatis的分页,据库是Sql Server 2000!
2.9 为本书示例准备一个模板 / 60 2.10 本章小结 / 61 第3章 调试工具及技巧 / 62 3.1 使用firebug进行调试 / 62 3.2 在ie中调试 / 76 3.2.1 使用debugbar和companion.js调试 / 76 3.2.2 使用ietester测试 / ...
定义数据(Data Definition) 51 步骤二 列模型(Column Model) 52 Grid组件的简易分页 53 Grid数据 53 怎么做一个分页的Grid 54 分页栏Toolbar 55 EXT Menu组件 55 创建简易菜单 56 各种...
怎么做一个分页的Grid 54 分页栏Toolbar 55 EXT Menu组件 55 创建简易菜单 56 各种Item的类型 57 Item属性 57 在UI中摆放菜单 58 Menu的分配方式: 58 练一练 60 动态添加菜单按钮到Toolbar 61 更方便的是 61 下一步...
定义数据(Data Definition) 51 步骤二 列模型(Column Model) 52 Grid组件的简易分页 53 Grid数据 53 怎么做一个分页的Grid 54 分页栏Toolbar 55 EXT Menu组件 55 创建简易菜单 56 各种...
学习ext, guice 的好程序 学习ext4 extjs4, guice 的好程序 mybatis的好程序,可以借鉴很多东西的好程序
一看就懂,很简单,这里是我个人对EXT.js中YuiGrid空间的总结,主要包括增、删、改、查、分页、样式、取值等。对于一个初学Ext.js的技术人员来说很好
MyBatis-Ext是MyBatis的增强扩展,简化了MyBatis对单表增删改查的操作,提供通用的增删改查,支持函数式编程,支持分页查询,支持用户自定义通用方法,SQL无注入,集成简单,只做增强不做修改。 原理解析 快速入门 1...
最后利用一个商品信息管理系统和一个企业任务管理系统,向读者演示了ExtJS在实际项目中的应用以及实现流程。 《精通JS脚本之ExtJS框架》附有配套光盘,提供了书中实例的源代码和视频教学文件。此外,读者还可以...
一个简单快捷的分页器示例: from discord . ext import commands from discord . ext import buttons class MyPaginator ( buttons . Paginator ): def __init__ ( self , * args , ** kwargs ): super ()
【uni-app自动分页器】超简单,低重组!仅需两步轻松完成完整分页逻辑(翻页刷新,上拉加载更多),分页自动处理。支持自定义加载更多的文字或整个视图,自定义拖放刷新样式,自动管理空数据视图,支持吸顶效果等。 ...