今天之闲,写篇关于Extjs中分页技术,之所以对Extjs感兴趣,完全出于对Extjs分页grid面板莱单栏的上一页、下一页界面好看,而且简单。实现分页很简单其实和Extjs动态树状莱单一样,都是用到JSON数据类型存储。
JS代码:
Ext.onReady(function(){
Ext.lib.Ajax.defaultPostHeader += '; charset=UTF-8';
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([sm,
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,width:300,
editor:new Ext.grid.GridEditor(new Ext.form.TextField(
{
allowBlank:false
}))},
{header:'邮编',dataIndex:'sex',sortable:true,renderer:renderSex}
]);
function renderSex(value)
{
if(value=='woman')
{
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:'ExtjsServlet'}),
reader:new Ext.data.JsonReader({
totalProperty:'totalProperty',
root:'root'
},[
{name:'id'},
{name:'price'},
{name:'sex'}
])
});
var grid = new Ext.grid.GridPanel({
renderTo:"right",
store:store,
cm:cm,
// sm:new Ext.grid.RowSelectionModel({singleSelect:true}),
loadMask:true,
width:752,
height:470,
// bbar:new Ext.PagingToolbar({下面工具条
bbar:new Ext.PagingToolbar({
pageSize:10,
store:store,
displayInfo:true,
displayMsg:'显示第{0}数据到{1},一共有{2}条',
emptyMsg:'没有记录'
}),
tbar:[{
text: '删除',
iconCls:'user',
handler : function(){
//var record = grid.getSelectionModel().getSelected();// 返回值为 Record 类型
var rows = grid.getSelectionModel().getSelections();// 返回值为 Record 数组
for( var i=0;i<rows.length;i++){
store.remove(rows);
}
grid.view.refresh();
// this.getEl().dom.action='./formservlet?operator=save';
this.getEl().dom.submit();
}},{
text: '添加'},
{
text: '修改'
},
{
text: '查询'
}]
});
store.load({params:{start:0,limit:10}})
Ext.get('remove').on("click",function(){
var rows = grid.getSelectionModel().getSelections();// 返回值为 Record 数组
for( var i=0;i<rows.length;i++){
store.remove(rows);
}
grid.view.refresh();
},this);
// grid.render();
});
Servlet代码:
public class ExtjsServlet extends HttpServlet {
/*
int ................
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
int start =Integer.parseInt(request.getParameter("start"));
int pageSize=Integer.parseInt(request.getParameter("limit"));
System.out.println("分页servlet");
if(start==0){start=1;}
String sql = "SELECT TOP "+pageSize+"* FROM county WHERE (id NOT IN ( SELECT TOP "+pageSize*(start-1)+"id FROM county ORDER BY id))ORDER BY id";
System.out.println(start+" "+pageSize);
JdbcDB jb=new JdbcDB();
Connection conn=jb.getConnection();
StringBuilder s=jb.getResultSet(conn,sql);
System.out.println(s.toString());
response.getWriter().write(s.toString());
jb.close(conn);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
public void init() throws ServletException {
// Put your code here
}
}
java代码:
public class JdbcDB {
/**
* @param args
*
*
*/
public Connection getConnection(){
Connection conn = null;
try{
Class.forName("net.sourceforge.jtds.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:jtds:sqlserver://localhost:1433/zhoutie","sa","123");
}catch(Exception e){
e.printStackTrace();
}
return conn;
}
public void close(Connection conn){
if(conn!=null){
try{
conn.close();
}catch(SQLException e){
e.printStackTrace();
}
}
}
public StringBuilder getResultSet(Connection conn,String sql){
int n=this.getResulsetRow(conn);
StringBuilder s= new StringBuilder("{totalProperty:"+n+",root:[");
PreparedStatement pst = null;
ResultSet rs = null;
try{
pst = conn.prepareStatement(sql);
rs = pst.executeQuery();
int i = 0;
while(rs.next())
{
i++;
String a=String.valueOf(rs.getInt("countyid"));
String c=rs.getString("county");
String b=String.valueOf(rs.getInt("fatherid"));
// System.out.println(a);
s.append("{id:'"+a+"',price:'"+c.trim()+"',sex:'"+b+"'}");
// System.out.println(rs.getString(2));
if(i<10)
{
s.append(",");
}
}
} catch(SQLException e){
e.printStackTrace();
}
s.append("]}");
return s;
}
public int getResulsetRow(Connection conn){
int n=0;
Statement pst = null;
ResultSet rs = null;
try{
pst=conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
rs=pst.executeQuery("select count(id) from county");
rs.next();
n=rs.getInt(1);
System.out.println(n);
}catch(SQLException e){
e.printStackTrace();
}
return n;
}
public static void main(String[] args) {
JdbcDB jb=new JdbcDB();
Connection conn=jb.getConnection();
String sql = "SELECT TOP "+10+"* FROM county WHERE (id NOT IN ( SELECT TOP "+10*(1-1)+"id FROM county ORDER BY id))ORDER BY id";
StringBuilder s=jb.getResultSet(conn ,sql);
System.out.println(s.toString());
jb.close(conn);
}
}
分享到:
- 2009-05-24 09:36
- 浏览 6524
- 评论(0)
- 论坛回复 / 浏览 (0 / 8009)
- 查看更多
相关推荐
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能。 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码。 1.1.1 Grid组件 ...
ExtJS的分页功能,checkboxs,行号,更删改查,鼠标右键的查看和删除。系统搭建在struts2,hibernate3,spring上面。
17、ExtJS之Grid组件* w/ o8 _- \. Q! [* R6 s& u0 V 18、ExtJS之ComboBox获取远程数据、网页计算器5 W& ]. W7 ?, V/ Q 19、ExtJS之组件面向对象编程(一) 20、ExtJS之组件面向对象编程(一) 21、项目实战-需求...
ExtJS4 Grid组件 Extjs4 TreeGrid Extjs4 TreePanel实例 ExtJs4 动态加载 Extjs4 带复选框的树(Checkbox tree) Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充...
ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid) ExtJS4学习笔记(八)---Grid多选/全选 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ...
ExtJs最开始基于YUI技术,由开发人员 JackSlocum开发,通过参考JavaSwing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是 一款不可多得的JavaScript客户端技术的精品。 ...
一、Extjs的组件结构远比我们想象的复杂 46 二、组件分类 47 三、组件的生命周期 48 四、组件渲染方法render 50 五、小结 52 第九章:按钮与日期选择器 53 一、开始组件学习之旅 53 二、被设计得面目全非的按钮 53 ...
深入浅出ExtJS第2版+源码..1 下载EXT发布包 1 1.2 如何查看EXT自带的API和示例 1 1.3 为什么有些示例必须放在服务器上 才能看到效果 2 1.4 Hello World 2 1.4.1 直接使用下载的发布包 2 1.4.2 在项目中使用EXT...
本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
7.5.7 store的分页 / 359 7.5.8 store的排序:ext.util.sorter与ext.util.sortable / 360 7.5.9 store的过滤:ext.util.filter / 363 7.5.10 store的分组:ext.util.grouper / 363 7.5.11 树节点:ext.data....
c)修正分页列表中下面分页条中 分页那里直接输入数字,回车不跳页的问题; d)修改 一个form中同时存在两个datetime的input时,第二个不能选择时分的bug; e)增加 input的 kind与datatype的自动对应关系默认对应...
c)修正分页列表中下面分页条中 分页那里直接输入数字,回车不跳页的问题; d)修改 一个form中同时存在两个datetime的input时,第二个不能选择时分的bug; e)增加 input的 kind与datatype的自动对应关系默认对应...
c)修正分页列表中下面分页条中 分页那里直接输入数字,回车不跳页的问题; d)修改 一个form中同时存在两个datetime的input时,第二个不能选择时分的bug; e)增加 input的 kind与datatype的自动对应关系默认对应...
c)修正分页列表中下面分页条中 分页那里直接输入数字,回车不跳页的问题; d)修改 一个form中同时存在两个datetime的input时,第二个不能选择时分的bug; e)增加 input的 kind与datatype的自动对应关系默认对应...
+修正IE7下Grid分页速度慢(feedback:youwei, StevenGuan, hazardvn, gavindou, ttjacky)。 -实际上IE7下所以的回发都慢,原因是客户端的Base64编码速度慢,已经使用encodeURIComponent来代替Base64编码。 -俄语...
-Grid中TemplateField生成到页面中控件具有唯一ID,例如Grid1_ct5_Label2,Grid1_ct6_Label2(feedback:geruger)。 +2009-09-27 v2.1.2 -为Tree控件增加GetExpandAllNodesReference和...