经过Servlet让Extjs GridPanel 显示数据库数据
日期：2014-05-16 浏览次数：20559 次
通过Servlet让Extjs GridPanel 显示数据库数据
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',
hea
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
