ExtJS ComboBoxデータベースデータ読み込みの使い方

6251 ワード
combobox 
 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がデータを取得できます.
最大公約数と最小公倍数[Level 1]Python
SpringBoot MyBatisの設定