用grid面板分页显示指定班级的学生，能够对学生进行修改、删除和添加；服务器用servlet处理，数据用JSON格式进行传递
1条回答
凌岩歌-贰拾肆 2016-01-03 09:58关注以下是一个jsp页面，有查询，分页功能，Json格式数据。 你下载extjs的包，里面有详细示例代码，教你怎么用它的。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("basePath",basePath);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
分页grid视图
body {} #dataGrid { margin: 0; auto; } //消息对象 var msg; var store; Ext.onReady(function(){ //进度条 function pb(){ msg = Ext.MessageBox.wait('正在处理中...', '', null); } // 创建 store, 它存储数据 store = new Ext.data.Store({ url:'<%=path %>/queryServlet', // json解析对象 /* 后台数据示例 *{ "root":[{"pkId":1,"title":"好房便宜卖","contact":"13312345678","housePrice":2100.0,"registerDate":"2015-5-7 0:00:00"}, {"pkId":2,"title":"二人世界刚好","contact":"18987654321","housePrice":1200.0,"registerDate":"2015-5-7 0:00:00"}, {"pkId":3,"title":"三口之家","contact":"13312345678","housePrice":2900.0,"registerDate":"2015-5-7 0:00:00"}, {"pkId":4,"title":"白领公寓","contact":"13912345678","housePrice":2500.0,"registerDate":"2015-5-7 0:00:00"}, {"pkId":5,"title":"年青人租房就来吧","contact":"13312345678","housePrice":2600.0,"registerDate":"2015-5-7 0:00:00"}, {"pkId":6,"title":"高端别墅","contact":"13312345678","housePrice":2800.0,"registerDate":"2015-5-7 0:00:00"}, {"pkId":7,"title":"商务风格","contact":"13312345678","housePrice":2500.0,"registerDate":"2015-5-7 0:00:00"}, {"pkId":8,"title":"精装修，拎包入住","contact":"13312345678","housePrice":2790.0,"registerDate":"2015-5-7 0:00:00"}, {"pkId":9,"title":"附近有公园，空气好","contact":"13312345678","housePrice":3200.0,"registerDate":"2015-5-7 0:00:00"}, {"pkId":10,"title":"比邻世博馆","contact":"13912345678","housePrice":1800.0,"registerDate":"2015-5-7 0:00:00"}], "totalCount":32 } */ reader: new Ext.data.JsonReader({ // 根节点, 后台List转化成Json的对象 root: 'root' , //记录总数 totalProperty: 'totalCount', // 属性数组, 每个属性名都要和后台传回的json数据 中的key一致 fields: ['pkId', 'title', 'contact', 'housePrice', 'registerDate' ] }) }); // 调用方法加载数据源 //store.loadData(mydata); var cm = new Ext.grid.ColumnModel([ //dataIndex值 是store中属性名, 比如取到属性名是pkId的值 {id:'',header:'<input type="checkbox" id="ckbox" onclick="javascript:selectedAll(this)" />', dataIndex:null, renderer: buildCk }, {id:'pkId',header: "编号",width:50,sortable:true,dataIndex:'pkId' }, {header:"标题", width:75, sortable: false, dataIndex: 'title'}, {header:"联系电话",width:75,sortable:false,dataIndex:'contact' }, {header:"租金",width:75,sortable:false,dataIndex:'housePrice' }, {header:"发布时间",width:100,sortable:false,dataIndex:'registerDate' }, {header:"", dataIndex:null, renderer:bdLast } ]); // 创建grid对象 var grid = new Ext.grid.GridPanel({ store:store, cm:cm, /* columns:[ //dataIndex值 是store中属性名, 比如取到属性名是pkId的值 {id:'',header: "", dataIndex:null, renderer: buildCk }, {id:'pkId',header: "编号",width:50,sortable:true,dataIndex:'pkId' }, {header:"标题", width:75, sortable: false, dataIndex: 'title'}, {header:"联系电话",width:75,sortable:false,dataIndex:'contact' }, {header:"租金",width:75,sortable:false,dataIndex:'housePrice' }, {header:"发布时间",width:100,sortable:false,dataIndex:'registerDate' } ] */ viewConfig: { forceFit: true }, sm: new Ext.grid.RowSelectionModel({ // 设置只能单行选中, 去掉下面属性则可多行选中 singleSelect:true }), tbar: new Ext.Toolbar({ id: 'topbar', items: [ { text: '查 询', iconCls: 'bmenu', //使用图片做图标 icon: '', handler: createItem },'-', { text: '重 置', iconCls: 'bmenu', //使用图片做图标 icon: '', handler: function(){ } },'-', { text: '提 交', iconCls: 'bmenu', //使用图片做图标 icon: '', handler: toUpdate } ] }), /* autoExpandColumn: 'pkId', */ height:350, width: 800, bbar: new Ext.PagingToolbar({ //每页显示10条记录 pageSize: 10, store: store, displayInfo: true, displayMsg: ' 第{0}条 - 第{1}条记录 共{2}条', emptyMsg: "No topics to display", // 点击 下一页，上一页，第一页和最后一页都会调用doLoad方法 doLoad : function(C){ var B = {}, A = this.paramNames; //起始标记 B[A.start] = C; B[A.limit] = this.pageSize; pb(); this.store.load({ params : B, // 回调 callback : function(records,options,success){ msg.hide(); } }); } /* items:[ '-', { pressed: true, enableToggle:true, text: '显示某些数据', cls: 'x-btn-text-icon details', toggleHandler: toggleDetails } ] */ }) }); //grid.render(); // 发送到容器 grid.render('dataGrid'); /* function buildCk(val,metadata, record,rowIndex,colIndex){ */ function buildCk(){ //alert(val); //var title = store.reader.jsonData('title'); //alert(title); var chbox = '<input type="checkbox" class="itmeBox" name="itmeBox" />'; return chbox ; } // function bdLast(){ //var title = store.reader.jsonData['pkId']; //alert(title); } //查询 function createItem(){ pb(); store.load({ params:{start:0, limit:10} , // 回调 callback : function(records,options,success){ msg.hide(); } }); /* var result = store.load({ params:{start:0, limit:10} }); alert(result); */ } // function toUpdate(){ //var pkId = store.reader.jsonData['pkId']; //var s = new String(); s = store.reader.jsonData.pkId; alert(s); } }); // 全选/反选 function selectedAll(obj){ //alert(''); var boxs = document.getElementsByName('itmeBox'); for(var i=0 ; i<boxs.length; i++){ boxs[i].checked = obj.checked; } }
查 询
<!-- -->解决 无用评论 打赏举报
分享
- 2015-11-12 08:31回答 1 已采纳 使用Ext.data.proxy.Memory，而不是Ext.data.Store，要不你服务器端不要返回所有数据，返回多少显示多少，而不是按照你指定的pageSize。 [Ext5 客户端数据
- 2015-11-06 06:03回答 1 已采纳 ext会自动发送但前页到服务器，键名称为page
- 2014-12-08 07:50回答 4 已采纳 参考： http://adyhpq.blog.163.com/blog/static/3866700201052511315591/ 效果图 { config.items.add({
- 2009-08-24 11:45回答 2 已采纳 常见问题之一,把你的查询参数放入到store.baseParam中
- 2017-11-20 16:08沙子揉碎在眼睛里的博客 // 应用、附加 items : me . getCustomItems () }); me . callParent ( arguments ); me . child ( "#customComboId" ).setValue( me .store.pageSize); // 初始化赋值 } }) 引用： bbar : {...
- 2009-11-09 11:22回答 3 已采纳 不需要每次都加在全部数据 你就做一个默认的动作,每次分页都根据最后一个人的id以及帖子加在这个人的所有回复就可以了.
- 2015-09-22 08:21回答 1 已采纳 Toolbar的layout改为table，自己增加项目 ``` var ttoolbar = Ext.create('Ext.toolbar.Toolbar', {
- 2014-11-06 10:28回答 1 已采纳 autoEncode:true 是不是这个属性，看下api啊，这种情况，肯定可以处理的。
- 2019-07-22 19:42自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用...
- 2016-08-11 10:04回答 2 已采纳 看下载的压缩包里面的ext-4.1.1a\examples\form这里目录下的form-grid.html示例，然后将里面创建的表单对象作为window对象的元素（设置window对象的items为
- 2018-12-19 23:57应用架构：在ExtJS 4，引入了一个标准化的几乎适合任何ExtJS应用程序的MVC风格的应用架构。使用MVC，开发团队只需要学习一种架构就能理解任何ExtJS 4的应用。 SDK工具：正在测试beta版的Sencha SDK工具，在第一版本...
- 2015-12-17 14:06飞起航的博客 背景 分页查询在Web页面中比例很大，我自己也...ExtJS的分页功能，封装的很简单，因其例子少、API复杂、国内应用较少，往往需要先对ExtJS有整体认识、孰知API之后，才应用自如。感觉比较不易，以至于一个简单的分页
- 2014-07-07 23:16未来，值得期待的博客 extjs_09_自定义分页组件
- 2013-11-24 16:34亲斤门耳在成都的博客 ExtJs的分页做的相当出色！在此，我们简单的分析一下它的分页方法，看看它出色的功能！ 首先，常规上一个简单的分页程序需要有以下参数： 1.总记录数 -------根据条件总查询的总记录数 2.每页显示记录数 ------...
- 2012-07-25 12:06「已注销」的博客 在WEB应用的开发中经常会遇到要分页的情况，使用ExtJs的时候，也同样会遇到这样的问题。 我们来看下ExtJs中如何为我们对分页提供帮助的。 我们讨论一般情况。 我们在页面上显示分页，一般都是在gridpanel中...
- 2012-05-03 14:23因为前段时间有两个专案要用到extjs技术，所以自己学了一段...grid，tree，显示树信息的TreePanel、用于显示表格的GridPanel及EditorGridPanel，还有代表应用程序窗口的Ext.Window，与数据库交付，希望对初学者带来帮助
- 没有解决我的问题, 去提问
