建立读取数据的POJO
public class UserRole {
private String roleId;
private String roleName;
private String roleDesc;
public String getRoleId() {
return roleId;
}
public void setRoleId(String roleId) {
this.roleId = roleId;
}
public String getRoleName() {
return roleName;
}
public void setRoleName(String roleName) {
this.roleName = roleName;
}
public String getRoleDesc() {
return roleDesc;
}
public void setRoleDesc(String roleDesc) {
this.roleDesc = roleDesc;
}
}
在用ExtJS的时候,很多时候用到comboBox控件,这个控件可以有选择的给其他人员使用,而不是输入的方式。
comboBox可以加载本地配置好的数据,但是也可以通过加载数据库的表信息,直接读取。下面就是我读取的方法:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
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>
<base href="<%=basePath%>">
<title>文件上传</title>
<link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all.css">
<!-- <link rel="stylesheet" type="text/css" href="./utiljs/global.css">-->
<script type="text/javascript" src="./extjs/ext-base.js"></script>
<script type="text/javascript" src="./extjs/ext-all.js"></script>
<script type="text/javascript" src="./extjs/ext-lang-zh_CN.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var record=[
{name : 'roleId',type : 'string'},
{name : 'roleName',type : 'string'},
{name : 'roleDesc',type : 'string'}
];
var recordHeads = Ext.data.Record.create(record);
//定义查询数据的url
var datastore = new Ext.data.Store( {
proxy:new Ext.data.HttpProxy(new Ext.data.Connection({timeout:0,url:'./json/combo_buildComboBox.action'})),
reader : new Ext.data.JsonReader( {
root : 'rolelist', //后台返回的list集合
totalProperty : 'total' //用于计算全部数据的total
}, recordHeads),
remoteSort : false
});
datastore.load(); //加载store(),必须否则不加载action数据
var combo = new Ext.form.ComboBox({
width : 180,
allowBlank : false, //不允许为空
emptyText : '请选择',
//editable : false, //是否允许输入
store : datastore,
mode : 'local',
triggerAction : 'query',
valueField : 'roleId',
displayField : 'roleName',
applyTo : 'combo'
});
});
</script>
<input id=combo type="text" />
<!-- comboBox必须放在input标签里面 -->
</body>
</html>
这里是页面的comboBox的组件的js展示部分。
后台action逻辑代码部分,这里我单独分离出来,用jdbc连接。
package com.lzb.webutils.action;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import com.lzb.webutils.entity.UserRole;
import com.opensymphony.xwork2.ActionSupport;
/**
* 创建一个从数据库加载数据的下拉列表
* 这里是以t_sys_role表的数据为例子
* @author lizhenbin
*
*/
public class ComboBoxAction extends ActionSupport {
private UserRole role;
private List<UserRole> rolelist;
private int total;
//这里用JDBC加载数据
public String buildComboBox() throws Exception{
List<UserRole> tempRole = new ArrayList<UserRole>();
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
Class.forName("oracle.jdbc.driver.OracleDriver").newInstance();
conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:ora10g","piaolala","piaolala");
stmt = conn.createStatement();
rs = stmt.executeQuery("select * from t_sys_role");
while(rs.next()) {
UserRole u = new UserRole();
u.setRoleId(rs.getString("ROLEID"));
u.setRoleName(rs.getString("ROLENAME"));
u.setRoleDesc(rs.getString("ROLEDESC"));
tempRole.add(u);
}
for(UserRole u : tempRole) {
System.out.println("RoleId: "+u.getRoleId()+" RoleName: "+u.getRoleName()+" RoleDesc: "+u.getRoleDesc());
}
this.rolelist = tempRole;
this.total = tempRole.size(); //返回个数
return "success";
}
public UserRole getRole() {
return role;
}
public void setRole(UserRole role) {
this.role = role;
}
public List<UserRole> getRolelist() {
return rolelist;
}
public void setRolelist(List<UserRole> rolelist) {
this.rolelist = rolelist;
}
public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}
}
因为我返回的时json数据,所有再struts中配置信息如下:
<package name="webutils_json" namespace="/json" extends="json-default"> <action name="combo_*" method="{1}" class="com.lzb.webutils.action.ComboBoxAction"> <result type="json"></result> </action> </package>
这样再js里面的store就可以获取到数据了。