废话不说。。上例子
var storeParams = {
params : {
start : 0,
limit : 25
}
};
var sm = new Ext.grid.CheckboxSelectionModel();
// Process grid start
var processreader = new Ext.data.JsonReader({
totalProperty : "totalSize",
root : "data"
}, Ext.data.Record.create([{
name : "flowid",
type : "string"
}, {
name : "flowname",
type : "string"
}, {
name : "flowdes",
type : "string"
}, {
name : "tablename",
type : "string"
}, {
name : "creator",
type : "string"
}, {
name : "createtime",
type : "string"
}, {
name : "isdeploy",
type : "string"
}, {
name : "editurl",
type : "string"
}]));
var processproxy = new Ext.data.HttpProxy({
url : '../../ListProcess.action'
});
var processstore = new Ext.data.Store({
proxy : processproxy,
reader : processreader
});
var pagingBar = new Ext.PagingToolbar({
pageSize : 25,
store : processstore,
displayInfo : true,
displayMsg : '显示记录 {0} - {1} of {2}',
emptyMsg : "没有记录",
items : ['-']
});
var processgrid = new Ext.grid.GridPanel({
id : 'processPanel',
store : processstore,
sm : sm,
width : 600,
title : '流程列表',
region : 'center',
autoExpandColumn : 'flowname',
columns : [sm, {
header : "流程ID",
width : 50,
dataIndex : 'flowid',
align : 'right'
}, {
id : 'flowname',
header : "流程名称",
width : 100,
dataIndex : 'flowname',
align : 'right'
}, {
header : "流程描述",
width : 100,
dataIndex : 'flowdes',
align : 'right'
}, {
header : "表单名称",
width : 100,
dataIndex : 'tablename',
align : 'right'
}, {
header : "创建者",
width : 75,
dataIndex : 'creator',
align : 'right'
}, {
header : "更新时间",
width : 100,
dataIndex : 'createtime',
align : 'right'
}, {
header : "是否部署",
width : 75,
dataIndex : 'isdeploy',
align : 'right'
}, {
header : "editurl",
hidden : true,
dataIndex : 'editurl'
}],
stripeRows : true,
bbar : pagingBar
});
processstore.load(storeParams);
editurl用来存放单击时候跳转的页面
后台Java代码摘取如下
// listprocess
private int start;
private int limit;
public String ListProcess() throws FileNotFoundException, IOException {
String JSonResult = processService.GetProcess(start, limit);
getResponse().getWriter().write(JSonResult);
return null;
}
其中返回的JsonResult是类似如下的字符串
{"totalSize":2,"data":[{"creator":"admin","isdeploy":"否","flowname":"..............","createtime":"2009-03-30 16:45:20.157","flowid":"9"},{"creator":"admin","isdeploy":"否","flowname":".............","createtime":"2009-03-30 16:50:01.233","flowid":"11"}]}
其中totalSize是返回所有记录的总数 方便Grid计算分页
有多种查询条件的话,在storeParams 添加自己的查询条件即可
分享到:
相关推荐
Ext3.4 无限极tree grid demo Ext3.4 无限极tree grid demo Ext3.4 无限极tree grid demo
接下来 在mysql里建立 数据库位ext的库 再去项目中 src/META-INF/persistence.xml的配置文件里吧<!-- <property name="hibernate.hbm2ddl.auto" value="update" /> -->这句话的注释去掉 好了 部署项目到tomcat上 ...
简单的formt和grid的EXT DEMO,练习用
Ext grid dxhtmlgrid demo
ext java json grid
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
压缩包包含EXT3.2的源码和API。ExtTest项目为EXT的例子,包括增删改查的方法。绝对的运行的起来,总过路过,不要错过啊!
helloworld/可编辑的Grid/field/submit/MessageBox/removeRow/tablePanel/tree等十几个Demo 直接运行
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
demo简单明了,配置proxy就好请求就可以从后台拿数据,本地数据所以用的是data
此Demo不包含jar包,请自行添加 博文链接:https://yourgame.iteye.com/blog/228826
Exlipse项目`~部署到tomcat下后直接敲 http://localhost:8080/cdab访问 主要使用了ext的grid 分组以及tab和tree
这个Demo主要演示了用Hibernate+DWR+ExtJS如何和服务器通信,并且实现Grid的分页功能....
ext 4.0 学习笔记(1)Array Grid ...这套笔记讲解每一种对象的属性未必是完全的,主要是讲解EXT4.0自带demo,要深入学习的可以去查看API,我的资源有EXT3.0的中文API 今天学习的是:Array Grid,效果如下:
Spring+Hibernate+Ext+dwr做的一个简单的grid的增删改查,面板布局, 通过autoload方式载入grid ,以及XML树的建立 ,连接MySql数据库 。JS文件代码在Demo文件夹下,JAVA代码在src下。适合新手
基于EXT4.0 MVC 模式开发GRID DEMO 包括:GRID 分页、分组、排序、编辑等等常用功能 访问路径:http://localhost/Ext4Mvc/gridManager/gm.html
Extjs5.1 Grid的简单例子
使用到的Ext组件 这个Demo涉及到Ext中的GridPanel,FormPanel和Window三个组件。效果图现在开始讲解代码,首先看一下创建GridPanel的代码片段 代码如下://定义数据列表面板类 PersonListGridPanel = Ext.extend(Ext...
原本是打算采用EXTJS4 的MVC做应用框架,已完成左侧树菜单、tabpanel(内嵌Grid,带查询及分页功能) 但是由于网络上的相关文章太少,公司对这个框架提出疑问,以后会不会遇到问题,所以改用ext3了...唉
jquery 的UI grid,支持Json,还有很多功能,貌似不比Ext Grid差多少