extjs的应用及分页显示

用grid面板分页显示指定班级的学生,能够对学生进行修改、删除和添加;服务器用servlet处理,数据用JSON格式进行传递

js

1个回答

以下是一个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: '查&nbsp询', iconCls: 'bmenu', //使用图片做图标 icon: '', handler: createItem },'-', { text: '重&nbsp置', iconCls: 'bmenu', //使用图片做图标 icon: '', handler: function(){ } },'-', { text: '提&nbsp交', 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; } }




查 询
<!-- -->

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!