ExtJS ComboBoxデータベースデータ読み込みの使い方
6251 ワード
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がデータを取得できます.