GridPanel上显示数据,可以使用Struts,也可以使用Servlet的方法,两者的用法相近,所以,给出后者的实现方法:
这里先列出HTML代码:
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="../css/grid-examples.css" />
<link rel="stylesheet" type="text/css" href="../css/examples.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<title>后台登陆页面</title>
</head>
<body>
<script type="text/javascript" src="../css/examples.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var win;
var button = Ext.get('show-btn');
button.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
if(!win){
win = new Ext.Window({
applyTo:'hello-win',
layout:'fit',
width:500,
height:500,
closeAction:'hide',
plain: true,
items: new Ext.TabPanel({
applyTo: 'hello-tabs',
autoTabs:true,
activeTab:0,
deferredRender:false,
border:false,
items : [ {
title : '添加操作',
html : '<iframe width=100% height=100% src=address_add.jsp />'
} ]
})
});
}
win.show(this);
});
//下面是做列表(原来是通过HttpProxy和Servlet来实现JS与数据库数据的交互)
var store = new Ext.data.JsonStore({
root: 'bugs',
totalProperty: 'totalCount',
idProperty: 'threadid',
remoteSort: true,
fields: ['id','name','sex','mobile','email','qq','company','address','postcode'],
proxy: new Ext.data.HttpProxy({
//url:'http://localhost:8080/ExtjsPaging/Bug',
url:'http://localhost:8080/Jstudio_v1_0029_extjs_jsp/DataServlet',
method:'GET'
})
});
store.setDefaultSort('id', 'desc');
var grid = new Ext.grid.GridPanel({
width:"100%",
height:550,
title:'通讯录列表',
store: store,
trackMouseOver:false,
disableSelection:false,
loadMask: true,
// grid columns
columns:[{
header: "序号",
dataIndex: 'id',
width: 70,
align: 'center',
// renderer: renderTopic,
sortable: true
},{
header: "姓名",
dataIndex: 'name',
width: 100,
align: 'center',
//hidden: true,
sortable: true
},{
header: "性别",
dataIndex: 'sex',
width: 70,
align: 'center',
//sortable: true
},{
//id: 'mobile',
header: "手机号码",
dataIndex: 'mobile',
width: 200,
align: 'center',
//renderer: renderLast,
// sortable: true
},{
header: "电子邮件",
dataIndex: 'email',
width: 200,
align: 'center',
// sortable: true
},{
header: "QQ号码",
dataIndex: 'qq',
width: 200,
align: 'center',
// sortable: true
},{
header: "公司名称",
dataIndex: 'company',
width: 200,
align: 'center',
// sortable: true
},{
header: "地址",
dataIndex: 'address',
width: 300,
align: 'center',
// sortable: true
},{
header: "邮编",
dataIndex: 'postcode',
width: 100,
align: 'center',
// sortable: true
}
],
// customize view config
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:false,
getRowClass : function(record, rowIndex, p, store){
if(this.showPreview){
p.body = '<p>'+record.data.excerpt+'</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},
// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[
'-', {
pressed: true,
enableToggle:true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
})
});
// render it
grid.render('topic-grid');
// trigger the data store load
store.load({params:{start:0, limit:25}});
});
</script>
<input type="button" id="show-btn" value="添加联系人" /><br /><br />
<div id="hello-win" class="x-hidden">
<div class="x-window-header">Hello Dialog</div>
<div id="hello-tabs"></div>
</div>
<div id="topic-grid"></div>
</body>
</html>
然后给出实现Servlet类
package com.lee.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Hashtable;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.lee.dao.ServletDao;
public class DataServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String sql = "select * from address";
ServletDao sd = new ServletDao();
List<Hashtable<String, String>> list2 = sd.selectData(sql);
Iterator<Hashtable<String, String>> it = list2.iterator();
StringBuilder sb = new StringBuilder();
sb.append("{totalCount:14,bugs:[");
while(it.hasNext()) {
Hashtable<String, String> hash2 = it.next();
//String name2 = hash2.get("qq");
sb.append("{");
sb.append("id:" + hash2.get("id"));
sb.append(",name:" + "\'" + hash2.get("name") + "\'");
sb.append(",sex:" + "\'" + hash2.get("sex") + "\'");
sb.append(",mobile:" + "\'" + hash2.get("mobile") + "\'");
sb.append(",email:" + "\'" + hash2.get("email") + "\'");
sb.append(",qq:" + "\'" + hash2.get("qq") + "\'");
sb.append(",company:" + "\'" + hash2.get("company") + "\'");
sb.append(",address:" + "\'" + hash2.get("address") + "\'");
sb.append(",postcode:" + "\'" + hash2.get("postcode") + "\'");
sb.append("},");
}
String json = sb.substring(0, sb.length() - 1);
json += "]}";
response.setContentType("text/html");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
out.println(json);
out.close();
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
再是 dao层:(内是相关的测试)
package com.lee.dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.Hashtable;
import java.util.Iterator;
import java.util.List;
import java.sql.ResultSetMetaData;
public class ServletDao {
public List selectData(String sql) {
//List<Object> list = new ArrayList<Object>();
List<Hashtable<String, String>> list = new ArrayList<Hashtable<String,String>>();
try {
Class.forName("com.mysql.jdbc.Driver");
String url = "jdbc:mysql://localhost:3306/ssh_ext_demo";
Connection conn = DriverManager.getConnection(url, "root", "123");
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery(sql);
ResultSetMetaData rsmd = rs.getMetaData();
while(rs.next()) {
Hashtable<String, String> hash =new Hashtable<String, String>();
for(int i =1;i<=rsmd.getColumnCount();i++){
String field = (String)rsmd.getColumnName(i);
String value = (String)rs.getString(i);
if(value == null)
value="";
hash.put(field, value);
}
list.add(hash);
}
} catch (Exception e) {
e.printStackTrace();
}
return list;
}
public static void main(String[] args) {
String s = "select * from address";
ServletDao sd = new ServletDao();
List<Hashtable<String, String>> list2 = sd.selectData(s);
Iterator<Hashtable<String, String>> it = list2.iterator();
StringBuilder sb = new StringBuilder();
sb.append("{totalCount:14,bugs:[");
while(it.hasNext()) {
Hashtable<String, String> hash2 = it.next();
//String name2 = hash2.get("qq");
sb.append("{");
sb.append("id:" + hash2.get("id"));
sb.append(",name:" + "\'" + hash2.get("name") + "\'");
sb.append(",sex:" + "\'" + hash2.get("sex") + "\'");
sb.append(",mobile:" + "\'" + hash2.get("mobile") + "\'");
sb.append(",email:" + "\'" + hash2.get("email") + "\'");
sb.append(",qq:" + "\'" + hash2.get("qq") + "\'");
sb.append(",company:" + "\'" + hash2.get("company") + "\'");
sb.append(",address:" + "\'" + hash2.get("address") + "\'");
sb.append(",postcode:" + "\'" + hash2.get("postcode") + "\'");
sb.append("},");
}
String json = sb.substring(0, sb.length() - 1);
json += "]}";
System.out.println(json);
}
}
最后是XML:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>DataServlet</servlet-name>
<servlet-class>com.lee.servlet.DataServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>DataServlet</servlet-name>
<url-pattern>/DataServlet</url-pattern>
</servlet-mapping>
</web-app>
分享到：
相关推荐
### 通过Servlet让Extjs GridPanel显示数据库数据 在现代Web开发中，将数据库中的数据动态展示在前端界面上是一项常见的需求。本文档主要介绍如何通过Servlet技术配合Extjs框架中的GridPanel组件来实现这一功能。 ...
在ExtJs中，GridPanel是用于展示数据的常用组件，它可以提供丰富的功能，如排序、分页、筛选等。在实际应用中，我们经常需要监听用户的交互行为，比如双击行进行进一步的操作。本篇文章将深入讲解如何在ExtJs ...
总结起来，EXTJS GridPanel的ColumnModel允许我们灵活控制列宽，通过`flex`和`autoWidth`属性可以实现列宽随数据内容的变化而动态调整。同时，监听数据变化并适时刷新视图可以确保用户界面始终展示最佳的数据布局。...
GridPanel是ExtJs中一个非常重要的组件，它用于展示表格数据，而延时加载则是一种优化大量数据处理的技术，可以显著提高用户界面的响应速度。 1. **ExtJs GridPanel**： GridPanel是ExtJs中的核心组件之一，它提供...
在本案例中，我们关注的是如何使用ExtJS框架显示来自MySQL数据库的信息，并通过Java进行后端处理，将数据转化为JSON格式，以供前端展示。 ### 详细知识点解析 #### 1. 构建数据库表结构 首先，创建一个名为`...
在实际应用中，我们经常需要在GridPanel底部显示一行“合计”行，以便对某一列或多列的数据进行求和或其他统计操作。这篇博文“给Extjs的GridPanel增加‘合计’行”将指导我们如何实现这一功能。 首先，我们需要...
ExtJs接收到响应后，更新GridPanel显示的数据，或者给出操作成功或失败的提示。 5. **分页处理**：在ExtJs的GridPanel中，设置store的proxy配置，指定为AjaxProxy，并配置url指向Servlet的查询接口。通过store的...
总结，ExtJS 在与数据库交互时，主要依赖数据模型、存储、代理和各种组件。通过这些工具，开发者能方便地实现Web应用的数据管理，包括增删改查等核心功能。同时，ExtJS 提供的丰富组件和API，使得界面设计和用户体验...
总结一下，这个例子展示了如何通过ExtJS的 `JsonStore` 与Servlet进行数据交互。Servlet在后台处理请求，返回JSON格式的数据，而ExtJS负责在前端接收和展示这些数据。这样的设计模式使得前后端分工明确，便于开发和...
本项目是关于使用Java服务器页面（JSP）和Servlet技术，结合ExtJS前端框架，实现数据的创建（Create）、读取（Read）、更新（Update）和删除（Delete），也就是常说的CRUD操作。这是一个典型的Web应用程序开发示例，...
后来公司让改变一个Gridpanel的展现方式，要求实现滚屏的效果。于是我就开始找API相关的功能了。找了很久，也没有找到框架的相应控制方法，然后在网上找了很久，也没有找到有人给去示例，无奈就只能自己写JS来控制...
通过以上分析可以看出，在ExtJS中利用`GridPanel`展示数据时，需要通过多个对象进行配合来完成数据的加载、解析、展示等功能。这些对象包括`HttpProxy`、`JsonReader`、`Store`、`ColumnModel`和`PagingToolbar`等。...
在IT行业中，Web开发是一项核心任务，而ExtJS和Servlet是两种常见的技术工具，用于构建交互性强、功能丰富的用户界面和后端数据处理。本文将详细介绍如何利用ExtJS4和Servlet来实现Grid组件的数据填充，并集成增删改...
列模型指定表格的列头及对应的数据字段，数据源可以是内存中的数组，也可以是远程加载的数据，这里采用后者，通过Servlet获取。分页配置允许用户按页浏览大量数据，提高用户体验。 Servlet则在后台扮演数据提供者的...
在“Extjs和后台数据库交互的程序，增删改查”项目中，我们将探讨如何利用ExtJS与后台数据库进行数据的添加、删除、修改和查询操作。 1. **ExtJS的数据模型（Model）** 在ExtJS中，数据模型定义了对象的结构，包括...
ExtJS的GridPanel导出excel文件,方便快捷易懂!
在这个场景中，我们看到ExtJS用于前端展示，而Java通过Servlet处理后端数据请求。 首先，我们需要理解分页的基本原理。分页是将大量数据分为多个小块，以便用户可以逐步浏览，提高网页加载速度和用户体验。在ExtJS...
首先，让我们深入了解EXTJS GridPanel的构建过程： 1. **定义ColumnModel** ColumnModel是GridPanel的列模型，它定义了表格的结构，包括列名、数据索引等。例如： ```javascript var cm = new Ext.grid....
- **JsonP通信**：由于同源策略限制，跨域请求常用JsonP方式，Servlet可以通过输出JSON格式数据，配合ExtJS的回调函数实现数据交换。 - **RESTful API设计**：Servlet可以设计为RESTful风格，提供CRUD（Create, ...